@tuturuuu/ui 0.17.0 → 0.19.0

package/src/components/ui/tu-do/projects/dialogs/create-project-dialog.tsx

@@ -1,117 +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';
-import { Textarea } from '@tuturuuu/ui/textarea';
-import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-
-interface CreateProjectDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSubmit: (data: { name: string; description?: string }) => void;
-  isCreating: boolean;
-}
-
-export function CreateProjectDialog({
-  open,
-  onOpenChange,
-  onSubmit,
-  isCreating,
-}: CreateProjectDialogProps) {
-  const t = useTranslations('task-projects.create_dialog');
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-
-  const handleSubmit = () => {
-    const trimmedName = name.trim();
-    if (!trimmedName) return; // Prevent empty names
-
-    onSubmit({
-      name: trimmedName,
-      description: description.trim() || undefined,
-    });
-    setName('');
-    setDescription('');
-  };
-
-  const handleOpenChange = (newOpen: boolean) => {
-    if (!newOpen && !isCreating) {
-      setName('');
-      setDescription('');
-    }
-    onOpenChange(newOpen);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{t('title')}</DialogTitle>
-          <DialogDescription>{t('description')}</DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4 py-2">
-          <div className="space-y-2">
-            <Label htmlFor="project-name" className="font-medium text-sm">
-              {t('project_name')}
-            </Label>
-            <Input
-              id="project-name"
-              placeholder={t('project_name_placeholder')}
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              disabled={isCreating}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label
-              htmlFor="project-description"
-              className="font-medium text-sm"
-            >
-              {t('description_label')}
-            </Label>
-            <Textarea
-              id="project-description"
-              placeholder={t('description_placeholder')}
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              disabled={isCreating}
-              className="min-h-20"
-            />
-          </div>
-        </div>
-
-        <DialogFooter className="gap-2">
-          <Button
-            variant="ghost"
-            onClick={() => handleOpenChange(false)}
-            disabled={isCreating}
-          >
-            {t('cancel')}
-          </Button>
-          <Button onClick={handleSubmit} disabled={isCreating || !name.trim()}>
-            {isCreating ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                {t('creating')}
-              </>
-            ) : (
-              t('create_project')
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/ui/tu-do/projects/dialogs/edit-project-dialog.tsx

@@ -1,125 +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';
-import { Textarea } from '@tuturuuu/ui/textarea';
-import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
-import type { TaskProject } from '../types';
-
-interface EditProjectDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  project: TaskProject | null;
-  onSubmit: (data: { name: string; description?: string }) => void;
-  isUpdating: boolean;
-}
-
-export function EditProjectDialog({
-  open,
-  onOpenChange,
-  project,
-  onSubmit,
-  isUpdating,
-}: EditProjectDialogProps) {
-  const t = useTranslations('task-projects.edit_dialog');
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-
-  useEffect(() => {
-    if (project) {
-      setName(project.name);
-      setDescription(project.description || '');
-    }
-  }, [project]);
-
-  const handleSubmit = () => {
-    const trimmedName = name.trim();
-    if (!trimmedName) return; // Prevent empty names
-
-    onSubmit({
-      name: trimmedName,
-      description: description.trim() || undefined,
-    });
-  };
-
-  const handleOpenChange = (newOpen: boolean) => {
-    if (!newOpen && !isUpdating) {
-      setName('');
-      setDescription('');
-    }
-    onOpenChange(newOpen);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{t('title')}</DialogTitle>
-          <DialogDescription>{t('description')}</DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4 py-2">
-          <div className="space-y-2">
-            <Label htmlFor="edit-project-name" className="font-medium text-sm">
-              {t('project_name')}
-            </Label>
-            <Input
-              id="edit-project-name"
-              placeholder={t('project_name_placeholder')}
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              disabled={isUpdating}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label
-              htmlFor="edit-project-description"
-              className="font-medium text-sm"
-            >
-              {t('description_label')}
-            </Label>
-            <Textarea
-              id="edit-project-description"
-              placeholder={t('description_placeholder')}
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              disabled={isUpdating}
-              className="min-h-20"
-            />
-          </div>
-        </div>
-
-        <DialogFooter className="gap-2">
-          <Button
-            variant="ghost"
-            onClick={() => handleOpenChange(false)}
-            disabled={isUpdating}
-          >
-            {t('cancel')}
-          </Button>
-          <Button onClick={handleSubmit} disabled={isUpdating || !name.trim()}>
-            {isUpdating ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                {t('updating')}
-              </>
-            ) : (
-              t('update_project')
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/ui/tu-do/projects/dialogs/index.ts

@@ -1,3 +0,0 @@
-export { CreateProjectDialog } from './create-project-dialog';
-export { EditProjectDialog } from './edit-project-dialog';
-export { ManageTasksDialog } from './manage-tasks-dialog';

package/src/components/ui/tu-do/projects/dialogs/manage-tasks-dialog.tsx

@@ -1,205 +0,0 @@
-'use client';
-
-import { Loader2, Trash2 } from '@tuturuuu/icons';
-import { Badge } from '@tuturuuu/ui/badge';
-import { Button } from '@tuturuuu/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@tuturuuu/ui/dialog';
-import { Label } from '@tuturuuu/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@tuturuuu/ui/select';
-import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
-import type { TaskOption, TaskProject } from '../types';
-
-interface ManageTasksDialogProps {
-  project: TaskProject | null;
-  onClose: () => void;
-  availableTaskOptions: TaskOption[];
-  tasksLoading: boolean;
-  tasksError: Error | null;
-  onLinkTask: (taskId: string) => void;
-  onUnlinkTask: (taskId: string) => void;
-  isLinking: boolean;
-  isUnlinking: boolean;
-}
-
-export function ManageTasksDialog({
-  project,
-  onClose,
-  availableTaskOptions,
-  tasksLoading,
-  tasksError,
-  onLinkTask,
-  onUnlinkTask,
-  isLinking,
-  isUnlinking,
-}: ManageTasksDialogProps) {
-  const t = useTranslations('task-projects.manage_tasks_dialog');
-  const [taskToLink, setTaskToLink] = useState('');
-
-  const filteredTaskOptions = useMemo(() => {
-    if (!project) return [];
-    const linkedIds = new Set(project.linkedTasks.map((task) => task.id));
-    return availableTaskOptions.filter((task) => !linkedIds.has(task.id));
-  }, [availableTaskOptions, project]);
-
-  const handleLinkTask = () => {
-    if (taskToLink) {
-      onLinkTask(taskToLink);
-      setTaskToLink('');
-    }
-  };
-
-  const handleClose = () => {
-    setTaskToLink('');
-    onClose();
-  };
-
-  return (
-    <Dialog
-      open={Boolean(project)}
-      onOpenChange={(open) => !open && handleClose()}
-    >
-      <DialogContent className="flex max-h-[85vh] flex-col">
-        <DialogHeader>
-          <DialogTitle>{t('title')}</DialogTitle>
-          <DialogDescription>{t('description')}</DialogDescription>
-        </DialogHeader>
-
-        {project ? (
-          <div className="flex-1 space-y-4 overflow-y-auto py-2">
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <Label className="font-medium text-sm">
-                  {t('linked_tasks')}
-                </Label>
-                {project.linkedTasks.length > 0 && (
-                  <Badge variant="outline" className="text-xs">
-                    {project.linkedTasks.length}{' '}
-                    {project.linkedTasks.length === 1
-                      ? t('task')
-                      : t('tasks_plural')}
-                  </Badge>
-                )}
-              </div>
-              {project.linkedTasks.length > 0 ? (
-                <div className="max-h-75 space-y-2 overflow-y-auto pr-2">
-                  {project.linkedTasks.map((task) => (
-                    <div
-                      key={task.id}
-                      className="flex items-center justify-between gap-2 rounded-md border border-dynamic-surface/40 bg-dynamic-surface/25 px-3 py-2"
-                    >
-                      <div className="min-w-0 flex-1">
-                        <p className="truncate font-medium text-sm">
-                          {task.name}
-                        </p>
-                        <p className="truncate text-muted-foreground text-xs">
-                          {task.listName ?? t('unassigned_list')}
-                        </p>
-                      </div>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="shrink-0 text-dynamic-red hover:text-dynamic-red focus-visible:text-dynamic-red"
-                        onClick={() => onUnlinkTask(task.id)}
-                        disabled={isUnlinking}
-                      >
-                        <Trash2 className="h-4 w-4" />
-                        <span className="sr-only">{t('remove')}</span>
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <div className="flex h-24 items-center justify-center rounded-md border border-dashed">
-                  <p className="text-center text-muted-foreground text-sm">
-                    {t('no_tasks_linked')}
-                  </p>
-                </div>
-              )}
-            </div>
-
-            <div className="space-y-2">
-              <Label className="font-medium text-sm">{t('link_a_task')}</Label>
-              <Select
-                value={taskToLink}
-                onValueChange={setTaskToLink}
-                disabled={
-                  tasksLoading || filteredTaskOptions.length === 0 || isLinking
-                }
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder={t('select_task_placeholder')} />
-                </SelectTrigger>
-                <SelectContent>
-                  {tasksLoading ? (
-                    <SelectItem disabled value="loading">
-                      {t('loading_tasks')}
-                    </SelectItem>
-                  ) : filteredTaskOptions.length === 0 ? (
-                    <SelectItem disabled value="none">
-                      {t('no_available_tasks')}
-                    </SelectItem>
-                  ) : (
-                    filteredTaskOptions.map((task) => (
-                      <SelectItem key={task.id} value={task.id}>
-                        <div className="flex items-center gap-2">
-                          <span className="truncate">{task.name}</span>
-                          {task.listName && (
-                            <span className="text-muted-foreground text-xs">
-                              · {task.listName}
-                            </span>
-                          )}
-                        </div>
-                      </SelectItem>
-                    ))
-                  )}
-                </SelectContent>
-              </Select>
-              {tasksError ? (
-                <p className="text-dynamic-red text-sm">{tasksError.message}</p>
-              ) : filteredTaskOptions.length === 0 && !tasksLoading ? (
-                <p className="text-muted-foreground text-sm">
-                  {t('all_tasks_linked')}
-                </p>
-              ) : null}
-            </div>
-          </div>
-        ) : null}
-
-        <DialogFooter className="gap-2">
-          <Button variant="ghost" onClick={handleClose}>
-            {t('close')}
-          </Button>
-          <Button
-            onClick={handleLinkTask}
-            disabled={
-              !taskToLink || isLinking || filteredTaskOptions.length === 0
-            }
-          >
-            {isLinking ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                {t('linking')}
-              </>
-            ) : (
-              t('link_task')
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/ui/tu-do/projects/hooks/index.ts

@@ -1,2 +0,0 @@
-export { useProjectFilters } from './use-project-filters';
-export { useTaskProjects } from './use-task-projects';

package/src/components/ui/tu-do/projects/hooks/use-project-filters.ts

@@ -1,248 +0,0 @@
-'use client';
-
-import useSearchParams from '@tuturuuu/ui/hooks/useSearchParams';
-import {
-  type Dispatch,
-  type SetStateAction,
-  useCallback,
-  useMemo,
-} from 'react';
-import type { SortBy, SortOrder, TaskProject, ViewMode } from '../types';
-
-const VALID_VIEW_MODES: ViewMode[] = ['list', 'grid'];
-const VALID_SORT_BY: SortBy[] = [
-  'created_at',
-  'name',
-  'status',
-  'priority',
-  'health_status',
-  'tasks_count',
-];
-const VALID_SORT_ORDER: SortOrder[] = ['asc', 'desc'];
-
-const validateParam = <T extends string>(
-  value: string | undefined,
-  validValues: readonly T[],
-  defaultValue: T
-) => {
-  return validValues.includes(value as T) ? (value as T) : defaultValue;
-};
-
-export function useProjectFilters(projects: TaskProject[]) {
-  const { getSingle, get, set } = useSearchParams();
-
-  // Read from URL with validation and defaults
-  const viewMode = validateParam(
-    getSingle('view'),
-    VALID_VIEW_MODES,
-    'list'
-  ) as ViewMode;
-
-  const sortBy = validateParam(
-    getSingle('sort'),
-    VALID_SORT_BY,
-    'created_at'
-  ) as SortBy;
-
-  const sortOrder = validateParam(
-    getSingle('order'),
-    VALID_SORT_ORDER,
-    'desc'
-  ) as SortOrder;
-
-  const searchQuery = getSingle('q') ?? '';
-
-  // Array filters
-  const normalizeArray = (value: unknown): string[] => {
-    if (Array.isArray(value)) return value;
-    if (typeof value === 'string') return [value];
-    return [];
-  };
-  const statusFilter = normalizeArray(get('status'));
-  const priorityFilter = normalizeArray(get('priority'));
-  const healthFilter = normalizeArray(get('health'));
-
-  // Setters that update URL (with refresh=false to avoid full page reload)
-  const setViewMode = useCallback(
-    (mode: ViewMode) => set({ view: mode }, false),
-    [set]
-  );
-  const setSortBy = useCallback((sort: SortBy) => set({ sort }, false), [set]);
-  const setSortOrder = useCallback(
-    (order: SortOrder) => set({ order }, false),
-    [set]
-  );
-  const setSearchQuery = useCallback(
-    (q: string) => set({ q: q || undefined }, false),
-    [set]
-  );
-
-  const setStatusFilter: Dispatch<SetStateAction<string[]>> = useCallback(
-    (value) => {
-      const currentValue = statusFilter;
-      const newValue =
-        typeof value === 'function' ? value(currentValue) : value;
-      set({ status: newValue.length ? newValue : undefined }, false);
-    },
-    [set, statusFilter]
-  );
-
-  const setPriorityFilter: Dispatch<SetStateAction<string[]>> = useCallback(
-    (value) => {
-      const currentValue = priorityFilter;
-      const newValue =
-        typeof value === 'function' ? value(currentValue) : value;
-      set({ priority: newValue.length ? newValue : undefined }, false);
-    },
-    [set, priorityFilter]
-  );
-
-  const setHealthFilter: Dispatch<SetStateAction<string[]>> = useCallback(
-    (value) => {
-      const currentValue = healthFilter;
-      const newValue =
-        typeof value === 'function' ? value(currentValue) : value;
-      set({ health: newValue.length ? newValue : undefined }, false);
-    },
-    [set, healthFilter]
-  );
-
-  // Computed values
-  const hasActiveFilters =
-    statusFilter.length > 0 ||
-    priorityFilter.length > 0 ||
-    healthFilter.length > 0;
-
-  const clearFilters = useCallback(() => {
-    set(
-      {
-        status: undefined,
-        priority: undefined,
-        health: undefined,
-        q: undefined, // Clear search query too
-      },
-      false
-    );
-  }, [set]);
-
-  // Filtered and sorted projects
-  const filteredProjects = useMemo(() => {
-    let result = projects;
-
-    // Search filter
-    if (searchQuery) {
-      result = result.filter(
-        (project) =>
-          project.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-          project.description?.toLowerCase().includes(searchQuery.toLowerCase())
-      );
-    }
-
-    // Status filter
-    if (statusFilter.length > 0) {
-      result = result.filter((project) =>
-        project.status ? statusFilter.includes(project.status) : false
-      );
-    }
-
-    // Priority filter
-    if (priorityFilter.length > 0) {
-      result = result.filter((project) =>
-        project.priority ? priorityFilter.includes(project.priority) : false
-      );
-    }
-
-    // Health filter
-    if (healthFilter.length > 0) {
-      result = result.filter((project) =>
-        project.health_status
-          ? healthFilter.includes(project.health_status)
-          : false
-      );
-    }
-
-    const priorityOrder = { critical: 4, high: 3, normal: 2, low: 1 };
-    const healthOrder = { off_track: 3, at_risk: 2, on_track: 1 };
-    // Sort
-    result = [...result].sort((a, b) => {
-      let aVal: string | number;
-      let bVal: string | number;
-
-      switch (sortBy) {
-        case 'name':
-          aVal = a.name.toLowerCase();
-          bVal = b.name.toLowerCase();
-          break;
-        case 'status':
-          aVal = a.status ?? '';
-          bVal = b.status ?? '';
-          break;
-        case 'priority':
-          aVal = a.priority
-            ? (priorityOrder[a.priority as keyof typeof priorityOrder] ?? 0)
-            : 0;
-          bVal = b.priority
-            ? (priorityOrder[b.priority as keyof typeof priorityOrder] ?? 0)
-            : 0;
-          break;
-        case 'health_status':
-          aVal = a.health_status
-            ? (healthOrder[a.health_status as keyof typeof healthOrder] ?? 0)
-            : 0;
-          bVal = b.health_status
-            ? (healthOrder[b.health_status as keyof typeof healthOrder] ?? 0)
-            : 0;
-          break;
-        case 'tasks_count':
-          aVal = a.tasksCount;
-          bVal = b.tasksCount;
-          break;
-        case 'created_at':
-          aVal = new Date(a.created_at ?? 0).getTime();
-          bVal = new Date(b.created_at ?? 0).getTime();
-          break;
-      }
-
-      if (sortOrder === 'asc') {
-        return aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
-      } else {
-        return aVal < bVal ? 1 : aVal > bVal ? -1 : 0;
-      }
-    });
-
-    return result;
-  }, [
-    projects,
-    searchQuery,
-    statusFilter,
-    priorityFilter,
-    healthFilter,
-    sortBy,
-    sortOrder,
-  ]);
-
-  return {
-    // View controls
-    viewMode,
-    setViewMode,
-    sortBy,
-    setSortBy,
-    sortOrder,
-    setSortOrder,
-    searchQuery,
-    setSearchQuery,
-
-    // Filters
-    statusFilter,
-    setStatusFilter,
-    priorityFilter,
-    setPriorityFilter,
-    healthFilter,
-    setHealthFilter,
-
-    // Computed
-    filteredProjects,
-    hasActiveFilters,
-    clearFilters,
-  };
-}