@tuturuuu/ui 0.17.0 → 0.18.0

package/src/components/ui/tu-do/projects/projectId/components/overview/linked-tasks-card.tsx

@@ -1,85 +0,0 @@
-'use client';
-
-import { CheckCircle2, ChevronRight, Target } from '@tuturuuu/icons';
-import { Badge } from '@tuturuuu/ui/badge';
-import { Button } from '@tuturuuu/ui/button';
-import { Card } from '@tuturuuu/ui/card';
-import { motion } from 'framer-motion';
-import { useTranslations } from 'next-intl';
-import { PriorityBadge } from '../../../components/project-badges';
-import { useProjectOverview } from '../project-overview-context';
-
-export function OverviewLinkedTasks() {
-  const t = useTranslations('task_project_detail.overview');
-  const { tasks, setActiveTab, setShowLinkTaskDialog, fadeInViewVariant } =
-    useProjectOverview();
-
-  const recentTasks = tasks.slice(0, 5);
-
-  return (
-    <motion.div {...fadeInViewVariant(0.3)}>
-      <Card className="rounded-lg bg-background p-5 shadow-none">
-        <div className="mb-4 flex items-center justify-between gap-3">
-          <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">
-              <Target className="h-4 w-4" />
-            </div>
-            <h2 className="font-semibold text-base">{t('linked_tasks')}</h2>
-          </div>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => setActiveTab('tasks')}
-            className="gap-1"
-          >
-            {t('view_all')}
-            <ChevronRight className="h-4 w-4" />
-          </Button>
-        </div>
-
-        {recentTasks.length > 0 ? (
-          <div className="space-y-2">
-            {recentTasks.map((task) => (
-              <div
-                key={task.id}
-                className="flex items-center justify-between gap-3 rounded-md border bg-muted/30 p-3 transition-colors hover:bg-muted/50"
-              >
-                <div className="min-w-0 flex-1">
-                  <h4 className="font-medium text-sm">{task.name}</h4>
-                  {task.priority && <PriorityBadge priority={task.priority} />}
-                </div>
-                {task.closed_at && (
-                  <Badge
-                    variant="outline"
-                    className="gap-1 border-dynamic-green/30 bg-dynamic-green/10 text-dynamic-green"
-                  >
-                    <CheckCircle2 className="h-3 w-3" />
-                    {t('done')}
-                  </Badge>
-                )}
-              </div>
-            ))}
-          </div>
-        ) : (
-          <div className="py-8 text-center">
-            <Target className="mx-auto mb-2 h-8 w-8 text-muted-foreground/30" />
-            <p className="text-muted-foreground text-sm">
-              {t('no_tasks_linked')}
-            </p>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => {
-                setActiveTab('tasks');
-                setShowLinkTaskDialog(true);
-              }}
-              className="mt-2"
-            >
-              {t('link_tasks')}
-            </Button>
-          </div>
-        )}
-      </Card>
-    </motion.div>
-  );
-}

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

@@ -1,85 +0,0 @@
-'use client';
-
-import { ChevronRight, Loader2, Sparkles } from '@tuturuuu/icons';
-import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
-import { Button } from '@tuturuuu/ui/button';
-import { Card } from '@tuturuuu/ui/card';
-import { motion } from 'framer-motion';
-import { useTranslations } from 'next-intl';
-import { useProjectOverview } from '../project-overview-context';
-
-export function OverviewUpdates() {
-  const t = useTranslations('task_project_detail.overview');
-  const { recentUpdates, isLoadingUpdates, setActiveTab, fadeInViewVariant } =
-    useProjectOverview();
-
-  return (
-    <motion.div {...fadeInViewVariant(0.2)}>
-      <Card className="rounded-lg bg-background p-5 shadow-none">
-        <div className="mb-4 flex items-center justify-between gap-3">
-          <h2 className="font-semibold text-base">{t('recent_updates')}</h2>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => setActiveTab('updates')}
-            className="gap-1"
-          >
-            {t('view_all')}
-            <ChevronRight className="h-4 w-4" />
-          </Button>
-        </div>
-
-        {isLoadingUpdates ? (
-          <div className="flex items-center justify-center py-8">
-            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-          </div>
-        ) : recentUpdates.length > 0 ? (
-          <div className="space-y-3">
-            {recentUpdates.map((update) => (
-              <div
-                key={update.id}
-                className="cursor-pointer rounded-md border bg-muted/30 p-3 transition-colors hover:bg-muted/50"
-                onClick={() => setActiveTab('updates')}
-              >
-                <div className="mb-2 flex items-center gap-2">
-                  <Avatar className="h-6 w-6">
-                    <AvatarImage
-                      src={update.creator?.avatar_url || undefined}
-                    />
-                    <AvatarFallback className="text-xs">
-                      {update.creator?.display_name?.[0]?.toUpperCase() || 'U'}
-                    </AvatarFallback>
-                  </Avatar>
-                  <span className="font-medium text-sm">
-                    {update.creator?.display_name || t('unknown_user')}
-                  </span>
-                  <span className="text-muted-foreground text-xs">
-                    {new Date(update.created_at).toLocaleDateString()}
-                  </span>
-                </div>
-                <p className="line-clamp-2 text-foreground/70 text-sm">
-                  {update.content}
-                </p>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <div className="py-8 text-center">
-            <Sparkles className="mx-auto mb-2 h-8 w-8 text-muted-foreground/30" />
-            <p className="text-muted-foreground text-sm">
-              {t('no_updates_yet')}
-            </p>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => setActiveTab('updates')}
-              className="mt-2"
-            >
-              {t('post_update')}
-            </Button>
-          </div>
-        )}
-      </Card>
-    </motion.div>
-  );
-}

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

@@ -1,35 +0,0 @@
-'use client';
-
-import { OverviewDescription } from './overview/description-card';
-import { OverviewLinkedDocuments } from './overview/linked-documents-card';
-import { OverviewLinkedTasks } from './overview/linked-tasks-card';
-import { OverviewUpdates } from './overview/updates-card';
-import { ProjectConfiguration } from './project-configuration';
-import { ProjectSidebar } from './project-sidebar';
-
-export function OverviewTab() {
-  return (
-    <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-      {/* Main content area */}
-      <div className="space-y-4 lg:col-span-2">
-        {/* Description Card */}
-        <OverviewDescription />
-
-        {/* Project Configuration - Collapsible */}
-        <ProjectConfiguration />
-
-        {/* Recent Updates */}
-        <OverviewUpdates />
-
-        {/* Recent Tasks */}
-        <OverviewLinkedTasks />
-
-        {/* Linked Documents */}
-        <OverviewLinkedDocuments />
-      </div>
-
-      {/* Metadata sidebar */}
-      <ProjectSidebar />
-    </div>
-  );
-}

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

@@ -1,229 +0,0 @@
-'use client';
-import { Circle } from '@tuturuuu/icons';
-import { Card } from '@tuturuuu/ui/card';
-import { Input } from '@tuturuuu/ui/input';
-import { Label } from '@tuturuuu/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@tuturuuu/ui/select';
-import { Switch } from '@tuturuuu/ui/switch';
-import { motion } from 'framer-motion';
-import { useTranslations } from 'next-intl';
-import type { HealthStatus, TaskPriority } from '../types';
-import { ProjectLeadSelector } from './project-lead-selector';
-import { useProjectOverview } from './project-overview-context';
-
-export function ProjectConfiguration() {
-  const {
-    showConfiguration: show,
-    editedStatus,
-    setEditedStatus,
-    editedPriority,
-    setEditedPriority,
-    editedHealthStatus,
-    setEditedHealthStatus,
-    editedLeadId,
-    setEditedLeadId,
-    editedStartDate,
-    setEditedStartDate,
-    editedEndDate,
-    setEditedEndDate,
-    editedArchived,
-    setEditedArchived,
-    workspaceMembers,
-    isLoadingMembers,
-  } = useProjectOverview();
-
-  const t = useTranslations('task_project_detail.configuration');
-  if (!show) return null;
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, height: 0 }}
-      animate={{ opacity: 1, height: 'auto' }}
-      exit={{ opacity: 0, height: 0 }}
-      transition={{ duration: 0.3 }}
-    >
-      <Card className="rounded-lg bg-background p-5 shadow-none">
-        <h2 className="mb-5 font-semibold text-base">{t('title')}</h2>
-
-        <div className="grid gap-5 md:grid-cols-2">
-          {/* Status */}
-          <div className="space-y-2">
-            <Label className="text-foreground/70 text-sm">
-              {t('status_label')}
-            </Label>
-            <Select
-              value={editedStatus || undefined}
-              onValueChange={(value) => setEditedStatus(value)}
-            >
-              <SelectTrigger className="bg-background">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="backlog">{t('status.backlog')}</SelectItem>
-                <SelectItem value="planned">{t('status.planned')}</SelectItem>
-                <SelectItem value="in_progress">
-                  {t('status.in_progress')}
-                </SelectItem>
-                <SelectItem value="in_review">
-                  {t('status.in_review')}
-                </SelectItem>
-                <SelectItem value="in_testing">
-                  {t('status.in_testing')}
-                </SelectItem>
-                <SelectItem value="completed">
-                  {t('status.completed')}
-                </SelectItem>
-                <SelectItem value="cancelled">
-                  {t('status.cancelled')}
-                </SelectItem>
-                <SelectItem value="active">{t('status.active')}</SelectItem>
-                <SelectItem value="on_hold">{t('status.on_hold')}</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          {/* Priority */}
-          <div className="space-y-2">
-            <Label className="text-foreground/70 text-sm">
-              {t('priority_label')}
-            </Label>
-            <Select
-              value={editedPriority || undefined}
-              onValueChange={(value) =>
-                setEditedPriority(value as TaskPriority)
-              }
-            >
-              <SelectTrigger className="bg-background">
-                <SelectValue placeholder={t('priority_placeholder')} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="critical">
-                  <span className="flex items-center gap-2">
-                    <span className="h-2 w-2 rounded-full bg-dynamic-red" />
-                    {t('priority.critical')}
-                  </span>
-                </SelectItem>
-                <SelectItem value="high">
-                  <span className="flex items-center gap-2">
-                    <span className="h-2 w-2 rounded-full bg-dynamic-orange" />
-                    {t('priority.high')}
-                  </span>
-                </SelectItem>
-                <SelectItem value="normal">
-                  <span className="flex items-center gap-2">
-                    <span className="h-2 w-2 rounded-full bg-dynamic-yellow" />
-                    {t('priority.normal')}
-                  </span>
-                </SelectItem>
-                <SelectItem value="low">
-                  <span className="flex items-center gap-2">
-                    <span className="h-2 w-2 rounded-full bg-dynamic-blue" />
-                    {t('priority.low')}
-                  </span>
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          {/* Health Status */}
-          <div className="space-y-2">
-            <Label className="text-foreground/70 text-sm">
-              {t('health_status_label')}
-            </Label>
-            <Select
-              value={editedHealthStatus || undefined}
-              onValueChange={(value) =>
-                setEditedHealthStatus(value as HealthStatus)
-              }
-            >
-              <SelectTrigger className="bg-background">
-                <SelectValue placeholder={t('health_status_placeholder')} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="on_track">
-                  <span className="flex items-center gap-2">
-                    <Circle className="h-2 w-2 rounded-full text-dynamic-green" />
-                    {t('health_status.on_track')}
-                  </span>
-                </SelectItem>
-                <SelectItem value="at_risk">
-                  <span className="flex items-center gap-2">
-                    <Circle className="h-2 w-2 rounded-full text-dynamic-yellow" />
-                    {t('health_status.at_risk')}
-                  </span>
-                </SelectItem>
-                <SelectItem value="off_track">
-                  <span className="flex items-center gap-2">
-                    <Circle className="h-2 w-2 rounded-full text-dynamic-red" />
-                    {t('health_status.off_track')}
-                  </span>
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          {/* Project Lead */}
-          <div className="space-y-2">
-            <Label className="text-foreground/70 text-sm">
-              {t('project_lead_label')}
-            </Label>
-            <ProjectLeadSelector
-              leadId={editedLeadId}
-              workspaceMembers={workspaceMembers}
-              isLoading={isLoadingMembers}
-              onChange={setEditedLeadId}
-            />
-          </div>
-
-          {/* Start Date */}
-          <div className="space-y-2">
-            <Label className="text-foreground/70 text-sm">
-              {t('start_date_label')}
-            </Label>
-            <Input
-              type="date"
-              value={editedStartDate}
-              onChange={(e) => setEditedStartDate(e.target.value)}
-              className="bg-background"
-            />
-          </div>
-
-          {/* End Date */}
-          <div className="space-y-2">
-            <Label className="text-foreground/70 text-sm">
-              {t('end_date_label')}
-            </Label>
-            <Input
-              type="date"
-              value={editedEndDate}
-              onChange={(e) => setEditedEndDate(e.target.value)}
-              className="bg-background"
-            />
-          </div>
-
-          {/* Archived */}
-          <div className="flex items-center justify-between rounded-md border bg-muted/30 p-3">
-            <div className="space-y-0.5">
-              <Label className="text-foreground/70 text-sm">
-                {t('archive_project')}
-              </Label>
-              <p className="text-muted-foreground text-xs">
-                {t('archive_description')}
-              </p>
-            </div>
-            <Switch
-              checked={editedArchived}
-              onCheckedChange={setEditedArchived}
-            />
-          </div>
-        </div>
-      </Card>
-    </motion.div>
-  );
-}

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

@@ -1,115 +0,0 @@
-'use client';
-
-import { Check, Edit2, Loader2, X } from '@tuturuuu/icons';
-import { Button } from '@tuturuuu/ui/button';
-import { Input } from '@tuturuuu/ui/input';
-import { motion } from 'framer-motion';
-import { useTranslations } from 'next-intl';
-import {
-  HealthStatusBadge,
-  StatusBadge,
-} from '../../components/project-badges';
-import type { HealthStatus } from '../types';
-
-interface ProjectHeaderProps {
-  projectName: string;
-  editedName: string;
-  setEditedName: (value: string) => void;
-  isEditingName: boolean;
-  setIsEditingName: (value: boolean) => void;
-  editedStatus: string | null;
-  editedHealthStatus: HealthStatus | null;
-  hasUnsavedChanges: boolean;
-  isSaving: boolean;
-  onSave: () => void;
-  onCancel: () => void;
-  fadeInUpVariant: (delay?: number) => object;
-}
-
-export function ProjectHeader({
-  projectName,
-  editedName,
-  setEditedName,
-  isEditingName,
-  setIsEditingName,
-  editedStatus,
-  editedHealthStatus,
-  hasUnsavedChanges,
-  isSaving,
-  onSave,
-  onCancel,
-  fadeInUpVariant,
-}: ProjectHeaderProps) {
-  const t = useTranslations('task_project_detail.header');
-  return (
-    <motion.div
-      {...fadeInUpVariant(0)}
-      className="relative rounded-lg border bg-card p-3 shadow-sm"
-    >
-      <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
-        <div className="min-w-0 flex-1 space-y-2">
-          {isEditingName ? (
-            <div className="flex items-center gap-2">
-              <Input
-                value={editedName}
-                onChange={(e) => setEditedName(e.target.value)}
-                className="h-10 font-semibold text-xl"
-                placeholder={t('project_name_placeholder')}
-                autoFocus
-              />
-            </div>
-          ) : (
-            <div className="group flex items-center gap-2">
-              <h1 className="truncate font-semibold text-xl">{projectName}</h1>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8 opacity-0 transition-opacity focus-visible:opacity-100 group-hover:opacity-100"
-                onClick={() => setIsEditingName(true)}
-                aria-label={t('edit_name_aria')}
-              >
-                <Edit2 className="h-4 w-4" />
-              </Button>
-            </div>
-          )}
-
-          <div className="flex flex-wrap items-center gap-2">
-            <StatusBadge status={editedStatus} />
-            <HealthStatusBadge health={editedHealthStatus} />
-          </div>
-        </div>
-
-        {hasUnsavedChanges && (
-          <motion.div
-            initial={{ opacity: 0, scale: 0.9 }}
-            animate={{ opacity: 1, scale: 1 }}
-            className="flex flex-wrap items-center gap-2"
-          >
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={onCancel}
-              disabled={isSaving}
-            >
-              <X className="mr-2 h-4 w-4" />
-              {t('cancel')}
-            </Button>
-            <Button size="sm" onClick={onSave} disabled={isSaving}>
-              {isSaving ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t('saving')}
-                </>
-              ) : (
-                <>
-                  <Check className="mr-2 h-4 w-4" />
-                  {t('save_changes')}
-                </>
-              )}
-            </Button>
-          </motion.div>
-        )}
-      </div>
-    </motion.div>
-  );
-}

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

@@ -1,55 +0,0 @@
-'use client';
-
-import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@tuturuuu/ui/select';
-import { cn } from '@tuturuuu/utils/format';
-import { useTranslations } from 'next-intl';
-import type { ProjectLeadSelectorProps } from '../types';
-
-export function ProjectLeadSelector({
-  leadId,
-  workspaceMembers,
-  isLoading,
-  onChange,
-  compact = false,
-}: ProjectLeadSelectorProps) {
-  const t = useTranslations('task_project_detail.lead_selector');
-  return (
-    <Select
-      value={leadId || 'none'}
-      onValueChange={(value) => onChange(value === 'none' ? null : value)}
-    >
-      <SelectTrigger className={cn('bg-background', compact && 'h-9')}>
-        <SelectValue
-          placeholder={isLoading ? t('loading') : t('select_lead')}
-        />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="none">
-          <span className="text-muted-foreground italic">{t('no_lead')}</span>
-        </SelectItem>
-        {workspaceMembers.map((member) => (
-          <SelectItem key={member.id} value={member.id}>
-            <div className="flex items-center gap-2">
-              <Avatar className="h-5 w-5">
-                <AvatarImage src={member.avatar_url || undefined} />
-                <AvatarFallback className="text-xs">
-                  {member.display_name?.[0]?.toUpperCase() || 'U'}
-                </AvatarFallback>
-              </Avatar>
-              <span className="text-sm">
-                {member.display_name || member.email}
-              </span>
-            </div>
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-}

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

@@ -1,82 +0,0 @@
-'use client';
-
-import type { TaskProjectWithRelations } from '@tuturuuu/types';
-import type { Task } from '@tuturuuu/types/primitives/Task';
-import type { WorkspaceMember } from '@tuturuuu/ui/hooks/use-workspace-members';
-import { createContext, useContext } from 'react';
-import type {
-  ActiveTab,
-  HealthStatus,
-  ProjectUpdate,
-  TaskPriority,
-} from '../types';
-
-interface ProjectOverviewContextType {
-  project: TaskProjectWithRelations;
-  tasks: Task[];
-  documents: Task[];
-  recentUpdates: ProjectUpdate[];
-  isLoadingUpdates: boolean;
-  setActiveTab: (tab: ActiveTab) => void;
-  setShowLinkTaskDialog: (show: boolean) => void;
-  // Description editing
-  editedDescription: string;
-  setEditedDescription: (value: string) => void;
-  isEditingDescription: boolean;
-  setIsEditingDescription: (value: boolean) => void;
-  // Configuration
-  showConfiguration: boolean;
-  setShowConfiguration: (value: boolean) => void;
-  editedStatus: string | null;
-  setEditedStatus: (value: string) => void;
-  editedPriority: TaskPriority | null;
-  setEditedPriority: (value: TaskPriority | null) => void;
-  editedHealthStatus: HealthStatus | null;
-  setEditedHealthStatus: (value: HealthStatus | null) => void;
-  editedLeadId: string | null;
-  setEditedLeadId: (value: string | null) => void;
-  editedStartDate: string;
-  setEditedStartDate: (value: string) => void;
-  editedEndDate: string;
-  setEditedEndDate: (value: string) => void;
-  editedArchived: boolean;
-  setEditedArchived: (value: boolean) => void;
-  // Sidebar
-  showLeadSelector: boolean;
-  setShowLeadSelector: (value: boolean) => void;
-  showTimelineEditor: boolean;
-  setShowTimelineEditor: (value: boolean) => void;
-  // Members
-  workspaceMembers: WorkspaceMember[];
-  isLoadingMembers: boolean;
-  // Animation
-  fadeInViewVariant: (delay?: number) => object;
-}
-
-const ProjectOverviewContext = createContext<ProjectOverviewContextType | null>(
-  null
-);
-
-export function ProjectOverviewProvider({
-  children,
-  value,
-}: {
-  children: React.ReactNode;
-  value: ProjectOverviewContextType;
-}) {
-  return (
-    <ProjectOverviewContext.Provider value={value}>
-      {children}
-    </ProjectOverviewContext.Provider>
-  );
-}
-
-export function useProjectOverview() {
-  const context = useContext(ProjectOverviewContext);
-  if (!context) {
-    throw new Error(
-      'useProjectOverview must be used within a ProjectOverviewProvider'
-    );
-  }
-  return context;
-}