@tuturuuu/ui 0.17.0 → 0.19.0

package/src/components/ui/tu-do/projects/projectId/components/project-sidebar.tsx

@@ -1,246 +0,0 @@
-'use client';
-
-import { Calendar, Edit2, Target, User } from '@tuturuuu/icons';
-import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
-import { Button } from '@tuturuuu/ui/button';
-import { Card } from '@tuturuuu/ui/card';
-import { Input } from '@tuturuuu/ui/input';
-import { Label } from '@tuturuuu/ui/label';
-import { motion } from 'framer-motion';
-import { useTranslations } from 'next-intl';
-import { ProjectLeadSelector } from './project-lead-selector';
-import { useProjectOverview } from './project-overview-context';
-
-export function ProjectSidebar() {
-  const {
-    project,
-    tasks,
-    editedLeadId,
-    setEditedLeadId,
-    showLeadSelector,
-    setShowLeadSelector,
-    editedStartDate,
-    setEditedStartDate,
-    editedEndDate,
-    setEditedEndDate,
-    showTimelineEditor,
-    setShowTimelineEditor,
-    workspaceMembers,
-    isLoadingMembers,
-    fadeInViewVariant,
-  } = useProjectOverview();
-
-  const t = useTranslations('task_project_detail.sidebar');
-  return (
-    <div className="space-y-4">
-      {/* Project Lead */}
-      <motion.div {...fadeInViewVariant(0.2)}>
-        <Card className="group rounded-lg bg-background p-4 shadow-none">
-          <div className="mb-3 flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <div className="flex h-8 w-8 items-center justify-center rounded-md bg-muted text-muted-foreground">
-                <User className="h-4 w-4" />
-              </div>
-              <h3 className="font-semibold text-sm">{t('project_lead')}</h3>
-            </div>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
-              onClick={() => setShowLeadSelector(!showLeadSelector)}
-              aria-label={t('edit_lead_aria')}
-            >
-              <Edit2 className="h-3 w-3" />
-            </Button>
-          </div>
-
-          {showLeadSelector ? (
-            <div className="space-y-2">
-              <Label className="text-foreground/70 text-xs">
-                {t('select_lead_label')}
-              </Label>
-              <ProjectLeadSelector
-                leadId={editedLeadId}
-                workspaceMembers={workspaceMembers}
-                isLoading={isLoadingMembers}
-                onChange={(value) => {
-                  setEditedLeadId(value);
-                  setShowLeadSelector(false);
-                }}
-                compact
-              />
-            </div>
-          ) : editedLeadId ? (
-            <div className="flex items-center gap-2">
-              <Avatar className="h-8 w-8">
-                <AvatarImage
-                  src={
-                    workspaceMembers.find((m) => m.id === editedLeadId)
-                      ?.avatar_url ||
-                    project.lead?.avatar_url ||
-                    undefined
-                  }
-                />
-                <AvatarFallback className="text-xs">
-                  {(workspaceMembers.find((m) => m.id === editedLeadId)
-                    ?.display_name ||
-                    project.lead?.display_name ||
-                    'U')?.[0]?.toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-              <span className="text-sm">
-                {workspaceMembers.find((m) => m.id === editedLeadId)
-                  ?.display_name ||
-                  project.lead?.display_name ||
-                  t('unknown')}
-              </span>
-            </div>
-          ) : (
-            <button
-              type="button"
-              onClick={() => setShowLeadSelector(true)}
-              className="w-full rounded-md border border-dashed p-3 text-center text-muted-foreground text-sm italic transition-colors hover:bg-muted/40"
-            >
-              {t('click_assign_lead')}
-            </button>
-          )}
-        </Card>
-      </motion.div>
-
-      {/* Timeline */}
-      <motion.div {...fadeInViewVariant(0.3)}>
-        <Card className="group rounded-lg bg-background p-4 shadow-none">
-          <div className="mb-3 flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <div className="flex h-8 w-8 items-center justify-center rounded-md bg-muted text-muted-foreground">
-                <Calendar className="h-4 w-4" />
-              </div>
-              <h3 className="font-semibold text-sm">{t('timeline')}</h3>
-            </div>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
-              onClick={() => setShowTimelineEditor(!showTimelineEditor)}
-              aria-label={t('edit_timeline_aria')}
-            >
-              <Edit2 className="h-3 w-3" />
-            </Button>
-          </div>
-
-          {showTimelineEditor ? (
-            <div className="space-y-3">
-              <div className="space-y-1.5">
-                <Label className="text-foreground/70 text-xs">
-                  {t('start_date')}
-                </Label>
-                <Input
-                  type="date"
-                  value={editedStartDate}
-                  onChange={(e) => setEditedStartDate(e.target.value)}
-                  className="h-9 bg-background text-sm"
-                />
-              </div>
-              <div className="space-y-1.5">
-                <Label className="text-foreground/70 text-xs">
-                  {t('end_date')}
-                </Label>
-                <Input
-                  type="date"
-                  value={editedEndDate}
-                  onChange={(e) => setEditedEndDate(e.target.value)}
-                  className="h-9 bg-background text-sm"
-                />
-              </div>
-            </div>
-          ) : (
-            <div className="space-y-2 text-sm">
-              {editedStartDate && (
-                <div className="flex justify-between">
-                  <span className="text-foreground/60">{t('start_label')}</span>
-                  <span className="font-medium">
-                    {new Date(editedStartDate).toLocaleDateString()}
-                  </span>
-                </div>
-              )}
-              {editedEndDate && (
-                <div className="flex justify-between">
-                  <span className="text-foreground/60">{t('end_label')}</span>
-                  <span className="font-medium">
-                    {new Date(editedEndDate).toLocaleDateString()}
-                  </span>
-                </div>
-              )}
-              {!editedStartDate && !editedEndDate && (
-                <button
-                  type="button"
-                  onClick={() => setShowTimelineEditor(true)}
-                  className="w-full rounded-md border border-dashed p-3 text-center text-muted-foreground text-sm italic transition-colors hover:bg-muted/40"
-                >
-                  {t('click_set_timeline')}
-                </button>
-              )}
-            </div>
-          )}
-        </Card>
-      </motion.div>
-
-      {/* Stats */}
-      <motion.div {...fadeInViewVariant(0.4)}>
-        <Card className="group rounded-lg bg-background p-4 shadow-none">
-          <div className="mb-3 flex items-center gap-2">
-            <div className="flex h-8 w-8 items-center justify-center rounded-md bg-muted text-muted-foreground">
-              <Target className="h-4 w-4" />
-            </div>
-            <h3 className="font-semibold text-sm">{t('project_stats')}</h3>
-          </div>
-          <div className="space-y-3">
-            <div>
-              <div className="mb-1 flex justify-between text-sm">
-                <span className="text-foreground/60">{t('total_tasks')}</span>
-                <span className="font-bold text-lg">{tasks.length}</span>
-              </div>
-              <div className="h-2 w-full rounded-full bg-muted">
-                <div className="h-full rounded-full bg-primary/60" />
-              </div>
-            </div>
-
-            <div>
-              <div className="mb-1 flex justify-between text-sm">
-                <span className="text-foreground/60">{t('completed')}</span>
-                <span className="font-bold text-lg">
-                  {tasks.filter((t) => t.closed_at).length}
-                </span>
-              </div>
-              <div className="h-2 w-full rounded-full bg-muted">
-                <div
-                  className="h-full rounded-full bg-dynamic-green/70"
-                  style={{
-                    width: `${tasks.length > 0 ? (tasks.filter((t) => t.closed_at).length / tasks.length) * 100 : 0}%`,
-                  }}
-                />
-              </div>
-            </div>
-
-            <div>
-              <div className="mb-1 flex justify-between text-sm">
-                <span className="text-foreground/60">{t('in_progress')}</span>
-                <span className="font-bold text-lg">
-                  {tasks.filter((t) => !t.closed_at).length}
-                </span>
-              </div>
-              <div className="h-2 w-full rounded-full bg-muted">
-                <div
-                  className="h-full rounded-full bg-dynamic-orange/70"
-                  style={{
-                    width: `${tasks.length > 0 ? (tasks.filter((t) => !t.closed_at).length / tasks.length) * 100 : 0}%`,
-                  }}
-                />
-              </div>
-            </div>
-          </div>
-        </Card>
-      </motion.div>
-    </div>
-  );
-}

package/src/components/ui/tu-do/projects/projectId/components/tasks-tab.tsx

@@ -1,266 +0,0 @@
-'use client';
-
-import { Link2, Target } from '@tuturuuu/icons';
-import type { Workspace, WorkspaceTaskBoard } from '@tuturuuu/types';
-import type { Task } from '@tuturuuu/types/primitives/Task';
-import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
-import { Button } from '@tuturuuu/ui/button';
-import { KanbanBoard } from '@tuturuuu/ui/tu-do/boards/boardId/kanban';
-import type { TaskFilters } from '@tuturuuu/ui/tu-do/boards/boardId/task-filter';
-import { TimelineBoard } from '@tuturuuu/ui/tu-do/boards/boardId/timeline-board';
-import {
-  BoardHeader,
-  type ListStatusFilter,
-} from '@tuturuuu/ui/tu-do/shared/board-header';
-import type { ViewType } from '@tuturuuu/ui/tu-do/shared/board-views';
-import { ListView } from '@tuturuuu/ui/tu-do/shared/list-view';
-import {
-  ProgressiveLoaderProvider,
-  type ProgressiveLoaderValue,
-} from '@tuturuuu/ui/tu-do/shared/progressive-loader-context';
-import { useTasksHref } from '@tuturuuu/ui/tu-do/tasks-route-context';
-import { useTranslations } from 'next-intl';
-import { useMemo } from 'react';
-
-interface TasksTabProps {
-  workspace: Workspace;
-  wsId: string;
-  projectId: string;
-  projectName: string;
-  tasks: Task[];
-  lists: TaskList[];
-  currentUserId: string;
-  currentView: ViewType;
-  setCurrentView: (view: ViewType) => void;
-  filters: TaskFilters;
-  setFilters: (filters: TaskFilters) => void;
-  listStatusFilter: ListStatusFilter;
-  setListStatusFilter: (filter: ListStatusFilter) => void;
-  setShowLinkTaskDialog: (show: boolean) => void;
-  onTaskPartialUpdate: (taskId: string, partial: Partial<Task>) => void;
-  embedded?: boolean;
-  isMultiSelectMode: boolean;
-  setIsMultiSelectMode: (mode: boolean) => void;
-}
-
-export function TasksTab({
-  workspace,
-  wsId,
-  projectId,
-  projectName,
-  tasks,
-  lists,
-  currentUserId,
-  currentView,
-  setCurrentView,
-  filters,
-  setFilters,
-  listStatusFilter,
-  setListStatusFilter,
-  setShowLinkTaskDialog,
-  onTaskPartialUpdate,
-  embedded = false,
-  isMultiSelectMode,
-  setIsMultiSelectMode,
-}: TasksTabProps) {
-  const t = useTranslations('task_project_detail.tasks_tab');
-  const tasksHref = useTasksHref();
-  const projectBoardId = `project:${projectId}`;
-
-  const progressiveLoader = useMemo<ProgressiveLoaderValue>(() => {
-    const tasksByList = tasks.reduce(
-      (acc, task) => {
-        const listTasks = acc[task.list_id] ?? [];
-        listTasks.push(task);
-        acc[task.list_id] = listTasks;
-        return acc;
-      },
-      {} as Record<string, Task[]>
-    );
-
-    return {
-      pagination: lists.reduce(
-        (acc, list) => {
-          const listTasks = tasksByList[list.id] ?? [];
-          acc[list.id] = {
-            page: 0,
-            hasMore: false,
-            totalCount: listTasks.length,
-            isLoading: false,
-            isInitialLoad: false,
-          };
-          return acc;
-        },
-        {} as ProgressiveLoaderValue['pagination']
-      ),
-      loadListPage: async (listId) => {
-        const listTasks = tasksByList[listId] ?? [];
-        return {
-          tasks: listTasks,
-          totalCount: listTasks.length,
-          hasMore: false,
-        };
-      },
-      revalidateLoadedLists: async () => {
-        return;
-      },
-    };
-  }, [lists, tasks]);
-
-  const virtualBoard: Pick<
-    WorkspaceTaskBoard,
-    'id' | 'name' | 'ws_id' | 'ticket_prefix' | 'archived_at'
-  > = {
-    id: projectId,
-    name: projectName,
-    ws_id: workspace.id,
-    ticket_prefix: null,
-    archived_at: null,
-  };
-
-  const renderView = () => {
-    switch (currentView) {
-      case 'kanban':
-        return (
-          <KanbanBoard
-            workspace={workspace}
-            workspaceId={workspace.id}
-            boardId={projectBoardId}
-            tasks={tasks}
-            lists={lists}
-            isLoading={false}
-            disableSort={!!filters.sortBy}
-            listStatusFilter={listStatusFilter}
-            filters={filters}
-            isMultiSelectMode={isMultiSelectMode}
-            setIsMultiSelectMode={setIsMultiSelectMode}
-          />
-        );
-      case 'list':
-        return (
-          <ListView
-            workspaceId={workspace.id}
-            boardId={projectBoardId}
-            tasks={tasks}
-            lists={lists}
-            isPersonalWorkspace={workspace.personal}
-            preserveTaskOrder={!!filters.sortBy}
-            searchQuery={filters.searchQuery}
-          />
-        );
-      case 'timeline':
-        return (
-          <TimelineBoard
-            wsId={workspace.id}
-            boardId={projectBoardId}
-            tasks={tasks}
-            lists={lists}
-            onTaskPartialUpdate={onTaskPartialUpdate}
-          />
-        );
-      default:
-        return (
-          <KanbanBoard
-            workspace={workspace}
-            workspaceId={workspace.id}
-            boardId={projectBoardId}
-            tasks={tasks}
-            lists={lists}
-            isLoading={false}
-            disableSort={!!filters.sortBy}
-            listStatusFilter={listStatusFilter}
-            filters={filters}
-            isMultiSelectMode={isMultiSelectMode}
-            setIsMultiSelectMode={setIsMultiSelectMode}
-          />
-        );
-    }
-  };
-
-  if (tasks.length === 0) {
-    return (
-      <ProjectTasksEmptyState
-        onLinkTasks={() => setShowLinkTaskDialog(true)}
-        description={t('no_tasks_description')}
-        linkTasksLabel={t('link_tasks')}
-        title={t('no_tasks_title')}
-      />
-    );
-  }
-
-  return (
-    <div
-      className="flex h-full min-h-0 flex-col overflow-hidden"
-      data-testid="task-project-tasks-tab"
-    >
-      <div
-        className="flex shrink-0 items-start gap-2 bg-background"
-        data-testid="task-project-tasks-header"
-      >
-        <div className="min-w-0 flex-1">
-          <BoardHeader
-            workspaceId={wsId}
-            board={virtualBoard}
-            currentView={currentView}
-            currentUserId={currentUserId}
-            onViewChange={setCurrentView}
-            filters={filters}
-            onFiltersChange={setFilters}
-            listStatusFilter={listStatusFilter}
-            onListStatusFilterChange={setListStatusFilter}
-            isPersonalWorkspace={workspace.personal}
-            backUrl={embedded ? undefined : `/${wsId}${tasksHref('/projects')}`}
-            hideActions={true}
-            isMultiSelectMode={isMultiSelectMode}
-            setIsMultiSelectMode={setIsMultiSelectMode}
-          />
-        </div>
-        <Button
-          onClick={() => setShowLinkTaskDialog(true)}
-          variant="outline"
-          size="xs"
-          className="mt-2 mr-2 shrink-0 gap-2"
-        >
-          <Link2 className="h-3.5 w-3.5" />
-          {t('link_tasks')}
-        </Button>
-      </div>
-      <div
-        className="min-h-0 flex-1 overflow-hidden"
-        data-testid="task-project-tasks-view"
-      >
-        <ProgressiveLoaderProvider value={progressiveLoader}>
-          {renderView()}
-        </ProgressiveLoaderProvider>
-      </div>
-    </div>
-  );
-}
-
-interface ProjectTasksEmptyStateProps {
-  title: string;
-  description: string;
-  linkTasksLabel: string;
-  onLinkTasks: () => void;
-}
-
-function ProjectTasksEmptyState({
-  title,
-  description,
-  linkTasksLabel,
-  onLinkTasks,
-}: ProjectTasksEmptyStateProps) {
-  return (
-    <div className="flex h-full min-h-0 flex-col items-center justify-center gap-4 p-8 text-center">
-      <Target className="h-14 w-14 text-muted-foreground/50" />
-      <div>
-        <p className="mb-2 font-semibold text-lg">{title}</p>
-        <p className="text-muted-foreground text-sm">{description}</p>
-      </div>
-      <Button onClick={onLinkTasks}>
-        <Link2 className="mr-2 h-4 w-4" />
-        {linkTasksLabel}
-      </Button>
-    </div>
-  );
-}

package/src/components/ui/tu-do/projects/projectId/components/update-card.tsx

@@ -1,162 +0,0 @@
-'use client';
-
-import {
-  Check,
-  Edit2,
-  Loader2,
-  MoreVertical,
-  Trash2,
-  X,
-} from '@tuturuuu/icons';
-import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
-import { Badge } from '@tuturuuu/ui/badge';
-import { Button } from '@tuturuuu/ui/button';
-import { Card } from '@tuturuuu/ui/card';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@tuturuuu/ui/dropdown-menu';
-import { Textarea } from '@tuturuuu/ui/textarea';
-import { motion } from 'framer-motion';
-import { useFormatter, useTranslations } from 'next-intl';
-import type { UpdateCardProps } from '../types';
-
-export function UpdateCard({
-  update,
-  currentUserId,
-  isEditing,
-  isDeleting,
-  editingContent,
-  onEdit,
-  onDelete,
-  onSave,
-  onCancel,
-  onContentChange,
-  fadeInVariant,
-}: UpdateCardProps) {
-  const t = useTranslations('task_project_detail.update_card');
-  const isOwnUpdate = update.creator_id === currentUserId;
-  const { dateTime } = useFormatter();
-
-  return (
-    <motion.div {...fadeInVariant}>
-      <Card className="group relative rounded-lg bg-background p-5 shadow-none">
-        <div className="mb-3 flex items-start gap-3">
-          <Avatar className="h-10 w-10">
-            <AvatarImage src={update.creator?.avatar_url || undefined} />
-            <AvatarFallback>
-              {update.creator?.display_name?.[0]?.toUpperCase() || 'U'}
-            </AvatarFallback>
-          </Avatar>
-          <div className="flex-1">
-            <div className="mb-2 flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <span className="font-semibold">
-                  {update.creator?.display_name || t('unknown_user')}
-                </span>
-                <span className="text-muted-foreground text-xs">
-                  {dateTime(new Date(update.created_at), {
-                    day: 'numeric',
-                    month: 'short',
-                    year: 'numeric',
-                    hour: '2-digit',
-                    minute: '2-digit',
-                  })}
-                </span>
-                {update.updated_at !== update.created_at && (
-                  <Badge variant="outline" className="text-xs">
-                    {t('edited_badge')}
-                  </Badge>
-                )}
-              </div>
-
-              {isOwnUpdate && !isEditing && (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8 opacity-0 transition-opacity focus-visible:opacity-100 group-hover:opacity-100"
-                      disabled={isDeleting}
-                      aria-label={t('actions_aria')}
-                    >
-                      <MoreVertical className="h-4 w-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem onClick={onEdit} className="gap-2">
-                      <Edit2 className="h-4 w-4" />
-                      {t('edit')}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={onDelete}
-                      className="gap-2 text-dynamic-red"
-                    >
-                      <Trash2 className="h-4 w-4" />
-                      {t('delete')}
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
-            </div>
-
-            {isEditing ? (
-              <div className="space-y-2">
-                <Textarea
-                  value={editingContent}
-                  onChange={(e) => onContentChange(e.target.value)}
-                  className="min-h-25 resize-none"
-                  autoFocus
-                />
-                <div className="flex items-center gap-2">
-                  <Button type="button" size="sm" onClick={onSave}>
-                    <Check className="mr-2 h-4 w-4" />
-                    {t('save')}
-                  </Button>
-                  <Button
-                    type="button"
-                    size="sm"
-                    variant="outline"
-                    onClick={onCancel}
-                  >
-                    <X className="mr-2 h-4 w-4" />
-                    {t('cancel')}
-                  </Button>
-                </div>
-              </div>
-            ) : (
-              <div className="prose prose-sm dark:prose-invert max-w-none text-foreground/80">
-                {update.content}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {!isEditing &&
-          update.reactionGroups &&
-          update.reactionGroups.length > 0 && (
-            <div className="mt-4 flex flex-wrap gap-2 border-t pt-3">
-              {update.reactionGroups.map((group, idx) => (
-                <Badge
-                  key={idx}
-                  variant="outline"
-                  className="cursor-pointer transition-colors hover:bg-muted/50"
-                >
-                  {group.emoji} {group.count}
-                </Badge>
-              ))}
-            </div>
-          )}
-
-        {isDeleting && (
-          <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background/80 backdrop-blur-sm">
-            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-          </div>
-        )}
-      </Card>
-    </motion.div>
-  );
-}