@tuturuuu/ui 0.17.0 → 0.18.0

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

@@ -1,129 +0,0 @@
-'use client';
-
-import { Loader2, Send, Sparkles } from '@tuturuuu/icons';
-import { Button } from '@tuturuuu/ui/button';
-import { Card } from '@tuturuuu/ui/card';
-import { Textarea } from '@tuturuuu/ui/textarea';
-import type { MotionProps } from 'framer-motion';
-import { motion } from 'framer-motion';
-import { useTranslations } from 'next-intl';
-import type { ProjectUpdate } from '../types';
-import { UpdateCard } from './update-card';
-
-interface UpdatesTabProps {
-  updates: ProjectUpdate[];
-  isLoadingUpdates: boolean;
-  newUpdateContent: string;
-  setNewUpdateContent: (value: string) => void;
-  isPostingUpdate: boolean;
-  postUpdate: () => void;
-  currentUserId: string;
-  editingUpdateId: string | null;
-  editingUpdateContent: string;
-  setEditingUpdateContent: (value: string) => void;
-  isDeletingUpdateId: string | null;
-  startEditingUpdate: (update: ProjectUpdate) => void;
-  deleteUpdate: (updateId: string) => void;
-  saveEditedUpdate: (updateId: string) => void;
-  cancelEditingUpdate: () => void;
-  fadeInViewVariant: (delay?: number) => MotionProps;
-}
-
-export function UpdatesTab({
-  updates,
-  isLoadingUpdates,
-  newUpdateContent,
-  setNewUpdateContent,
-  isPostingUpdate,
-  postUpdate,
-  currentUserId,
-  editingUpdateId,
-  editingUpdateContent,
-  setEditingUpdateContent,
-  isDeletingUpdateId,
-  startEditingUpdate,
-  deleteUpdate,
-  saveEditedUpdate,
-  cancelEditingUpdate,
-  fadeInViewVariant,
-}: UpdatesTabProps) {
-  const t = useTranslations('task_project_detail.updates_tab');
-  return (
-    <div className="mx-auto space-y-4">
-      {/* Post Update Form */}
-      <motion.div {...fadeInViewVariant(0)}>
-        <Card className="rounded-lg bg-background p-5 shadow-none">
-          <h3 className="mb-4 font-semibold text-base">{t('share_update')}</h3>
-          <div className="space-y-3">
-            <Textarea
-              value={newUpdateContent}
-              onChange={(e) => setNewUpdateContent(e.target.value)}
-              placeholder={t('share_placeholder')}
-              className="min-h-30 resize-none"
-              disabled={isPostingUpdate}
-            />
-            <div className="flex items-center justify-between">
-              <p className="text-muted-foreground text-xs">
-                {t('rich_text_coming_soon')}
-              </p>
-              <Button
-                onClick={postUpdate}
-                disabled={isPostingUpdate || !newUpdateContent.trim()}
-              >
-                {isPostingUpdate ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    {t('posting')}
-                  </>
-                ) : (
-                  <>
-                    <Send className="mr-2 h-4 w-4" />
-                    {t('post_update')}
-                  </>
-                )}
-              </Button>
-            </div>
-          </div>
-        </Card>
-      </motion.div>
-
-      {/* Updates Feed */}
-      {isLoadingUpdates ? (
-        <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-        </div>
-      ) : updates.length > 0 ? (
-        <div className="space-y-4">
-          {updates.map((update, index) => (
-            <UpdateCard
-              key={update.id}
-              update={update}
-              currentUserId={currentUserId}
-              isEditing={editingUpdateId === update.id}
-              isDeleting={isDeletingUpdateId === update.id}
-              editingContent={editingUpdateContent}
-              onEdit={() => startEditingUpdate(update)}
-              onDelete={() => deleteUpdate(update.id)}
-              onSave={() => saveEditedUpdate(update.id)}
-              onCancel={cancelEditingUpdate}
-              onContentChange={setEditingUpdateContent}
-              fadeInVariant={fadeInViewVariant(Math.min(index * 0.1, 0.5))}
-            />
-          ))}
-        </div>
-      ) : (
-        <motion.div {...fadeInViewVariant(0.1)}>
-          <Card className="rounded-lg p-12 text-center shadow-none">
-            <Sparkles className="mx-auto mb-4 h-12 w-12 text-muted-foreground/50" />
-            <h3 className="mb-2 font-semibold text-lg">
-              {t('no_updates_title')}
-            </h3>
-            <p className="text-muted-foreground text-sm">
-              {t('no_updates_description')}
-            </p>
-          </Card>
-        </motion.div>
-      )}
-    </div>
-  );
-}

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

@@ -1 +0,0 @@
-export { LinkTaskDialog } from './link-task-dialog';

package/src/components/ui/tu-do/projects/projectId/dialogs/link-task-dialog.tsx

@@ -1,114 +0,0 @@
-'use client';
-
-import { Link2, Target } from '@tuturuuu/icons';
-import type { Task } from '@tuturuuu/types/primitives/Task';
-import { Button } from '@tuturuuu/ui/button';
-import { Card } from '@tuturuuu/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@tuturuuu/ui/dialog';
-import { Input } from '@tuturuuu/ui/input';
-import { getDescriptionText } from '@tuturuuu/utils/text-helper';
-import { useTranslations } from 'next-intl';
-import { PriorityBadge } from '../../components/project-badges';
-
-interface LinkTaskDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  searchQuery: string;
-  setSearchQuery: (query: string) => void;
-  filteredTasks: Task[];
-  isLinking: boolean;
-  onLinkTask: (taskId: string) => void;
-}
-
-export function LinkTaskDialog({
-  open,
-  onOpenChange,
-  searchQuery,
-  setSearchQuery,
-  filteredTasks,
-  isLinking,
-  onLinkTask,
-}: LinkTaskDialogProps) {
-  const t = useTranslations('task_project_detail.link_dialog');
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl">
-        <DialogHeader>
-          <DialogTitle>{t('title')}</DialogTitle>
-          <DialogDescription>{t('description')}</DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          <div className="relative">
-            <Input
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder={t('search_placeholder')}
-            />
-          </div>
-
-          <div className="max-h-100 space-y-2 overflow-auto">
-            {searchQuery ? (
-              filteredTasks.length > 0 ? (
-                filteredTasks.map((task) => (
-                  <Card
-                    key={task.id}
-                    className="group cursor-pointer rounded-lg p-4 shadow-none transition-colors hover:bg-muted/30"
-                    onClick={() => onLinkTask(task.id)}
-                  >
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="flex-1">
-                        <h4 className="mb-1 font-medium">{task.name}</h4>
-                        {task.description && (
-                          <p className="line-clamp-2 text-muted-foreground text-sm">
-                            {getDescriptionText(task.description)}
-                          </p>
-                        )}
-                        <div className="mt-2 flex flex-wrap gap-2">
-                          {task.priority && (
-                            <PriorityBadge priority={task.priority} />
-                          )}
-                        </div>
-                      </div>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="opacity-0 transition-opacity focus-visible:opacity-100 group-hover:opacity-100"
-                        disabled={isLinking}
-                      >
-                        <Link2 className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  </Card>
-                ))
-              ) : (
-                <div className="py-12 text-center">
-                  <p className="text-muted-foreground text-sm">
-                    {t('no_tasks_found', { query: searchQuery })}
-                  </p>
-                </div>
-              )
-            ) : (
-              <div className="py-12 text-center">
-                <Target className="mx-auto mb-3 h-12 w-12 text-muted-foreground/30" />
-                <p className="text-muted-foreground text-sm">
-                  {t('start_typing')}
-                </p>
-              </div>
-            )}
-          </div>
-
-          <div className="rounded-lg border bg-muted/30 p-3">
-            <p className="text-foreground/70 text-xs">{t('tip')}</p>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

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

@@ -1,4 +0,0 @@
-export { useAnimationVariants } from './use-animation-variants';
-export { useProjectForm } from './use-project-form';
-export { useProjectUpdates } from './use-project-updates';
-export { useTaskLinking } from './use-task-linking';

package/src/components/ui/tu-do/projects/projectId/hooks/use-animation-variants.ts

@@ -1,68 +0,0 @@
-'use client';
-
-import { useEffect, useMemo, useState } from 'react';
-
-export function useAnimationVariants() {
-  const [isMobile, setIsMobile] = useState(false);
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
-
-  useEffect(() => {
-    const checkMobile = () => setIsMobile(window.innerWidth < 768);
-    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-    setPrefersReducedMotion(mediaQuery.matches);
-
-    checkMobile();
-    window.addEventListener('resize', checkMobile);
-
-    const handleChange = (e: MediaQueryListEvent) =>
-      setPrefersReducedMotion(e.matches);
-    mediaQuery.addEventListener('change', handleChange);
-
-    return () => {
-      window.removeEventListener('resize', checkMobile);
-      mediaQuery.removeEventListener('change', handleChange);
-    };
-  }, []);
-
-  const shouldReduceMotion = isMobile || prefersReducedMotion;
-
-  const fadeInUpVariant = useMemo(
-    () =>
-      (delay = 0) => ({
-        initial: {
-          opacity: shouldReduceMotion ? 1 : 0,
-          y: shouldReduceMotion ? 0 : 20,
-        },
-        animate: { opacity: 1, y: 0 },
-        transition: {
-          duration: shouldReduceMotion ? 0 : 0.6,
-          delay: shouldReduceMotion ? 0 : delay,
-        },
-      }),
-    [shouldReduceMotion]
-  );
-
-  const fadeInViewVariant = useMemo(
-    () =>
-      (delay = 0) => ({
-        initial: {
-          opacity: shouldReduceMotion ? 1 : 0,
-          y: shouldReduceMotion ? 0 : 30,
-        },
-        whileInView: { opacity: 1, y: 0 },
-        viewport: { once: true, margin: shouldReduceMotion ? '0px' : '-50px' },
-        transition: {
-          duration: shouldReduceMotion ? 0 : 0.6,
-          delay: shouldReduceMotion ? 0 : delay,
-        },
-      }),
-    [shouldReduceMotion]
-  );
-
-  return {
-    isMobile,
-    shouldReduceMotion,
-    fadeInUpVariant,
-    fadeInViewVariant,
-  };
-}

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

@@ -1,214 +0,0 @@
-'use client';
-
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { updateWorkspaceTaskProject } from '@tuturuuu/internal-api/tasks';
-import type { TaskProjectWithRelations } from '@tuturuuu/types';
-import { toast } from '@tuturuuu/ui/sonner';
-import dayjs from 'dayjs';
-import { useRouter } from 'next/navigation';
-import { useCallback, useEffect, useState } from 'react';
-import type { HealthStatus, TaskPriority } from '../types';
-
-interface UseProjectFormOptions {
-  wsId: string;
-  project: TaskProjectWithRelations;
-}
-
-function formatDateToInput(dateString: string | null | undefined): string {
-  if (!dateString) return '';
-  const date = dayjs(dateString);
-  if (!date.isValid()) return '';
-  return date.format('YYYY-MM-DD');
-}
-
-function formatInputToISO(dateString: string): string | null {
-  if (!dateString) return null;
-
-  // Use dayjs to parse and validate the date string
-  const date = dayjs(dateString, 'YYYY-MM-DD', true); // strict parsing
-
-  if (!date.isValid()) {
-    console.error(
-      `Invalid date format: expected YYYY-MM-DD, got "${dateString}"`
-    );
-    return null;
-  }
-
-  return date.toISOString();
-}
-
-interface UpdateProjectData {
-  name: string;
-  description: string | null;
-  priority: string | null;
-  health_status: HealthStatus | null;
-  status: string | null;
-  lead_id: string | null;
-  start_date: string | null;
-  end_date: string | null;
-  archived: boolean;
-}
-
-export function useProjectForm({ wsId, project }: UseProjectFormOptions) {
-  const router = useRouter();
-  const queryClient = useQueryClient();
-
-  // Editing UI state
-  const [isEditingName, setIsEditingName] = useState(false);
-  const [isEditingDescription, setIsEditingDescription] = useState(false);
-  const [showLeadSelector, setShowLeadSelector] = useState(false);
-  const [showTimelineEditor, setShowTimelineEditor] = useState(false);
-  const [showConfiguration, setShowConfiguration] = useState(false);
-
-  // Form values
-  const [editedName, setEditedName] = useState(project.name);
-  const [editedDescription, setEditedDescription] = useState(
-    project.description || ''
-  );
-  const [editedPriority, setEditedPriority] = useState(project.priority);
-  const [editedHealthStatus, setEditedHealthStatus] =
-    useState<HealthStatus | null>(project.health_status as HealthStatus | null);
-  const [editedStatus, setEditedStatus] = useState(project.status);
-  const [editedLeadId, setEditedLeadId] = useState(project.lead_id);
-  const [editedStartDate, setEditedStartDate] = useState(
-    formatDateToInput(project.start_date)
-  );
-  const [editedEndDate, setEditedEndDate] = useState(
-    formatDateToInput(project.end_date)
-  );
-  const [editedArchived, setEditedArchived] = useState(
-    project.archived ?? false
-  );
-
-  // Helper function to reset form fields from project data
-  const resetFormFromProject = useCallback(() => {
-    setEditedName(project.name);
-    setEditedDescription(project.description || '');
-    setEditedPriority(project.priority);
-    setEditedHealthStatus(project.health_status as HealthStatus | null);
-    setEditedStatus(project.status);
-    setEditedLeadId(project.lead_id);
-    setEditedStartDate(formatDateToInput(project.start_date));
-    setEditedEndDate(formatDateToInput(project.end_date));
-    setEditedArchived(project.archived ?? false);
-  }, [project]);
-
-  // Sync form state when project prop changes
-  useEffect(() => {
-    resetFormFromProject();
-  }, [resetFormFromProject]);
-
-  const hasUnsavedChanges =
-    editedName !== project.name ||
-    editedDescription !== (project.description || '') ||
-    editedPriority !== project.priority ||
-    editedHealthStatus !== project.health_status ||
-    editedStatus !== project.status ||
-    editedLeadId !== project.lead_id ||
-    editedStartDate !== formatDateToInput(project.start_date) ||
-    editedEndDate !== formatDateToInput(project.end_date) ||
-    editedArchived !== (project.archived ?? false);
-
-  // React Query mutation for updating project
-  const updateProjectMutation = useMutation({
-    mutationFn: async (data: UpdateProjectData) => {
-      return updateWorkspaceTaskProject(wsId, project.id, data);
-    },
-    onSuccess: () => {
-      toast.success('Project updated successfully');
-      setIsEditingName(false);
-      setIsEditingDescription(false);
-      setShowTimelineEditor(false);
-      void queryClient.invalidateQueries({
-        queryKey: ['task-project', wsId, project.id],
-      });
-      void queryClient.invalidateQueries({
-        queryKey: ['task-project-tasks', wsId, project.id],
-      });
-      router.refresh();
-    },
-    onError: (error) => {
-      console.error('Error updating project:', error);
-      toast.error(
-        error instanceof Error ? error.message : 'Failed to update project'
-      );
-    },
-  });
-
-  const saveProject = useCallback(() => {
-    updateProjectMutation.mutate({
-      name: editedName,
-      description: editedDescription || null,
-      priority: editedPriority || null,
-      health_status: editedHealthStatus || null,
-      status: editedStatus,
-      lead_id: editedLeadId || null,
-      start_date: formatInputToISO(editedStartDate),
-      end_date: formatInputToISO(editedEndDate),
-      archived: editedArchived,
-    });
-  }, [
-    updateProjectMutation,
-    editedName,
-    editedDescription,
-    editedPriority,
-    editedHealthStatus,
-    editedStatus,
-    editedLeadId,
-    editedStartDate,
-    editedEndDate,
-    editedArchived,
-  ]);
-
-  const cancelEdits = useCallback(() => {
-    resetFormFromProject();
-    setIsEditingName(false);
-    setIsEditingDescription(false);
-    setShowLeadSelector(false);
-    setShowTimelineEditor(false);
-  }, [resetFormFromProject]);
-
-  return {
-    // UI state
-    isEditingName,
-    setIsEditingName,
-    isEditingDescription,
-    setIsEditingDescription,
-    isSaving: updateProjectMutation.isPending,
-    showLeadSelector,
-    setShowLeadSelector,
-    showTimelineEditor,
-    setShowTimelineEditor,
-    showConfiguration,
-    setShowConfiguration,
-
-    // Form values
-    editedName,
-    setEditedName,
-    editedDescription,
-    setEditedDescription,
-    editedPriority,
-    setEditedPriority: setEditedPriority as (
-      value: TaskPriority | null
-    ) => void,
-    editedHealthStatus,
-    setEditedHealthStatus,
-    editedStatus,
-    setEditedStatus,
-    editedLeadId,
-    setEditedLeadId,
-    editedStartDate,
-    setEditedStartDate,
-    editedEndDate,
-    setEditedEndDate,
-    editedArchived,
-    setEditedArchived,
-
-    // Computed
-    hasUnsavedChanges,
-
-    // Actions
-    saveProject,
-    cancelEdits,
-  };
-}