@tuturuuu/ui 0.17.0 → 0.19.0

package/src/components/ui/tu-do/projects/components/project-list-item.tsx

@@ -1,195 +0,0 @@
-'use client';
-
-import {
-  Calendar,
-  ExternalLink,
-  FileText,
-  Link2,
-  Target,
-  User,
-} from '@tuturuuu/icons';
-import { Button } from '@tuturuuu/ui/button';
-import { Card } from '@tuturuuu/ui/card';
-import NextLink from 'next/link';
-import { useFormatter, useTranslations } from 'next-intl';
-import type { ComponentType } from 'react';
-import { useTasksHref } from '../../tasks-route-context';
-import type { TaskProject } from '../types';
-import { ProjectActionsMenu } from './project-actions-menu';
-import {
-  HealthStatusBadge,
-  PriorityBadge,
-  StatusBadge,
-} from './project-badges';
-import { ProjectProgressMeter } from './project-progress-meter';
-
-interface ProjectListItemProps {
-  project: TaskProject;
-  wsId: string;
-  onEdit: (project: TaskProject) => void;
-  onDelete: (projectId: string) => void;
-  onManageTasks: (project: TaskProject) => void;
-  onNavigate: (projectId: string) => void;
-  navigationMode?: 'dialog' | 'route';
-  isUpdating: boolean;
-  isDeleting: boolean;
-  isLinking: boolean;
-  isUnlinking: boolean;
-}
-
-export function ProjectListItem({
-  project,
-  wsId,
-  onEdit,
-  onDelete,
-  onManageTasks,
-  onNavigate,
-  navigationMode = 'route',
-  isUpdating,
-  isDeleting,
-  isLinking,
-  isUnlinking,
-}: ProjectListItemProps) {
-  const t = useTranslations('task-projects.project_card');
-  const tasksHref = useTasksHref();
-  const { dateTime } = useFormatter();
-
-  return (
-    <Card
-      className="group cursor-pointer rounded-lg border-dynamic-surface/70 bg-background p-4 shadow-none transition-colors hover:border-dynamic-blue/40 hover:bg-dynamic-blue/5"
-      onClick={() => onNavigate(project.id)}
-    >
-      <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_260px_132px] xl:items-center">
-        <div className="min-w-0 space-y-3">
-          <div className="flex items-start justify-between gap-3">
-            <div className="min-w-0">
-              {navigationMode === 'route' ? (
-                <NextLink
-                  href={`/${wsId}${tasksHref(`/projects/${project.id}`)}`}
-                  className="inline-flex max-w-full items-center gap-2 font-semibold text-lg hover:text-dynamic-blue"
-                  onClick={(event) => event.stopPropagation()}
-                >
-                  <span className="truncate">{project.name}</span>
-                  <ExternalLink className="h-4 w-4 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
-                </NextLink>
-              ) : (
-                <button
-                  type="button"
-                  className="inline-flex max-w-full items-center gap-2 text-left font-semibold text-lg hover:text-dynamic-blue"
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    onNavigate(project.id);
-                  }}
-                >
-                  <span className="truncate">{project.name}</span>
-                  <ExternalLink className="h-4 w-4 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
-                </button>
-              )}
-              <p className="mt-1 line-clamp-2 text-muted-foreground text-sm">
-                {project.description || t('no_description')}
-              </p>
-            </div>
-            <ProjectActionsMenu
-              project={project}
-              onEdit={onEdit}
-              onDelete={onDelete}
-              disabled={isUpdating || isDeleting}
-            />
-          </div>
-          <div className="flex flex-wrap gap-1.5">
-            <StatusBadge status={project.status} />
-            <PriorityBadge priority={project.priority} />
-            <HealthStatusBadge health={project.health_status} />
-          </div>
-        </div>
-
-        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
-          <ProjectProgressMeter
-            completed={project.completedTasksCount}
-            total={project.tasksCount}
-            compact
-          />
-          <div className="grid grid-cols-2 gap-2 text-sm">
-            <Stat icon={Target} label={t('tasks')} value={project.tasksCount} />
-            <Stat
-              icon={FileText}
-              label={t('documents')}
-              value={project.linkedDocuments.length}
-            />
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-2">
-          <MetaRow
-            icon={User}
-            value={project.lead?.display_name || t('unknown')}
-          />
-          <MetaRow
-            icon={Calendar}
-            value={formatDate(project.end_date, dateTime) ?? t('no_due_date')}
-          />
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={(event) => {
-              event.stopPropagation();
-              onManageTasks(project);
-            }}
-            disabled={isLinking || isUnlinking}
-            className="mt-1 gap-2"
-          >
-            <Link2 className="h-4 w-4" />
-            {t('manage')}
-          </Button>
-        </div>
-      </div>
-    </Card>
-  );
-}
-
-function Stat({
-  icon: Icon,
-  label,
-  value,
-}: {
-  icon: ComponentType<{ className?: string }>;
-  label: string;
-  value: number;
-}) {
-  return (
-    <div className="rounded-md border bg-dynamic-surface/20 p-2">
-      <div className="flex items-center gap-1.5 text-muted-foreground text-xs">
-        <Icon className="h-3.5 w-3.5" />
-        {label}
-      </div>
-      <p className="font-semibold tabular-nums">{value}</p>
-    </div>
-  );
-}
-
-function MetaRow({
-  icon: Icon,
-  value,
-}: {
-  icon: ComponentType<{ className?: string }>;
-  value: string;
-}) {
-  return (
-    <div className="flex min-w-0 items-center gap-2 text-muted-foreground text-sm">
-      <Icon className="h-4 w-4 shrink-0" />
-      <span className="truncate">{value}</span>
-    </div>
-  );
-}
-
-function formatDate(
-  value: string | null,
-  dateTime: ReturnType<typeof useFormatter>['dateTime']
-) {
-  if (!value) return null;
-  return dateTime(new Date(value), {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-  });
-}

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

@@ -1,87 +0,0 @@
-'use client';
-
-import {
-  AlertTriangle,
-  CheckCircle2,
-  FileText,
-  FolderKanban,
-  Target,
-} from '@tuturuuu/icons';
-import { Card } from '@tuturuuu/ui/card';
-import { cn } from '@tuturuuu/utils/format';
-import { useTranslations } from 'next-intl';
-import type { ProjectOperationsStats } from '../types';
-
-interface ProjectMetricsProps {
-  stats: ProjectOperationsStats;
-}
-
-export function ProjectMetrics({ stats }: ProjectMetricsProps) {
-  const t = useTranslations('task-projects.metrics');
-  const items = [
-    {
-      label: t('projects'),
-      value: stats.totalProjects,
-      detail: t('active_projects', { count: stats.activeProjects }),
-      icon: FolderKanban,
-      className: 'text-dynamic-blue',
-    },
-    {
-      label: t('linked_tasks'),
-      value: stats.linkedTasks,
-      detail: t('completed_tasks', { count: stats.completedTasks }),
-      icon: Target,
-      className: 'text-dynamic-green',
-    },
-    {
-      label: t('linked_documents'),
-      value: stats.linkedDocuments,
-      detail: t('reference_materials'),
-      icon: FileText,
-      className: 'text-dynamic-cyan',
-    },
-    {
-      label: t('risk_watch'),
-      value: stats.atRiskProjects,
-      detail:
-        stats.atRiskProjects === 0
-          ? t('clear')
-          : t('needs_attention', { count: stats.atRiskProjects }),
-      icon: stats.atRiskProjects === 0 ? CheckCircle2 : AlertTriangle,
-      className:
-        stats.atRiskProjects === 0 ? 'text-dynamic-green' : 'text-dynamic-red',
-    },
-  ];
-
-  return (
-    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-      {items.map((item) => {
-        const Icon = item.icon;
-        return (
-          <Card
-            key={item.label}
-            className="rounded-lg border-dynamic-surface/60 bg-background p-4 shadow-none"
-          >
-            <div className="flex items-start justify-between gap-3">
-              <div>
-                <p className="text-muted-foreground text-xs">{item.label}</p>
-                <p className="font-semibold text-2xl tabular-nums">
-                  {item.value}
-                </p>
-              </div>
-              <div
-                className={cn(
-                  'flex h-9 w-9 items-center justify-center rounded-md bg-dynamic-surface/40',
-                  item.className
-                )}
-              >
-                <Icon className="h-4 w-4" />
-              </div>
-            </div>
-            <p className="mt-3 text-muted-foreground text-xs">{item.detail}</p>
-          </Card>
-        );
-      })}
-    </div>
-  );
-}

package/src/components/ui/tu-do/projects/components/project-progress-meter.tsx

@@ -1,33 +0,0 @@
-'use client';
-
-import { Progress } from '@tuturuuu/ui/progress';
-import { useTranslations } from 'next-intl';
-
-interface ProjectProgressMeterProps {
-  completed: number;
-  total: number;
-  compact?: boolean;
-}
-
-export function ProjectProgressMeter({
-  completed,
-  total,
-  compact = false,
-}: ProjectProgressMeterProps) {
-  const t = useTranslations('task-projects.project_card');
-  const value = total > 0 ? Math.round((completed / total) * 100) : 0;
-
-  return (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between text-xs">
-        <span className="text-muted-foreground">{t('completion')}</span>
-        <span className="font-medium tabular-nums">
-          {compact
-            ? `${value}%`
-            : t('completion_ratio', { completed, total, value })}
-        </span>
-      </div>
-      <Progress value={value} className="h-1.5" />
-    </div>
-  );
-}

package/src/components/ui/tu-do/projects/components/project-sort-menu.tsx

@@ -1,71 +0,0 @@
-'use client';
-
-import { Calendar, ChevronDown } from '@tuturuuu/icons';
-import { Button } from '@tuturuuu/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@tuturuuu/ui/dropdown-menu';
-import { useTranslations } from 'next-intl';
-import type { SortBy, SortOrder } from '../types';
-
-interface ProjectSortMenuProps {
-  sortBy: SortBy;
-  setSortBy: (sort: SortBy) => void;
-  sortOrder: SortOrder;
-  setSortOrder: (order: SortOrder) => void;
-}
-
-const sortOptions: Array<{ value: SortBy; labelKey: string; icon?: boolean }> =
-  [
-    { value: 'created_at', labelKey: 'sort_created_date', icon: true },
-    { value: 'name', labelKey: 'sort_name' },
-    { value: 'status', labelKey: 'sort_status' },
-    { value: 'priority', labelKey: 'sort_priority' },
-    { value: 'health_status', labelKey: 'sort_health_status' },
-    { value: 'tasks_count', labelKey: 'sort_task_count' },
-  ];
-
-export function ProjectSortMenu({
-  sortBy,
-  setSortBy,
-  sortOrder,
-  setSortOrder,
-}: ProjectSortMenuProps) {
-  const t = useTranslations('task-projects.toolbar');
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" className="gap-2 rounded-md">
-          <ChevronDown className="h-4 w-4" />
-          {t('sort')}
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuRadioGroup
-          value={sortBy}
-          onValueChange={(value) => setSortBy(value as SortBy)}
-        >
-          {sortOptions.map((option) => (
-            <DropdownMenuRadioItem key={option.value} value={option.value}>
-              {option.icon ? <Calendar className="mr-2 h-4 w-4" /> : null}
-              {t(option.labelKey as any)}
-            </DropdownMenuRadioItem>
-          ))}
-        </DropdownMenuRadioGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem
-          onClick={() => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')}
-        >
-          {sortOrder === 'asc' ? t('sort_ascending') : t('sort_descending')}
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

package/src/components/ui/tu-do/projects/components/projects-empty-state.tsx

@@ -1,38 +0,0 @@
-'use client';
-
-import { Archive, Plus } from '@tuturuuu/icons';
-import { Button } from '@tuturuuu/ui/button';
-import { Card, CardContent } from '@tuturuuu/ui/card';
-import { useTranslations } from 'next-intl';
-
-interface ProjectsEmptyStateProps {
-  hasFilters: boolean;
-  onCreateClick: () => void;
-}
-
-export function ProjectsEmptyState({
-  hasFilters,
-  onCreateClick,
-}: ProjectsEmptyStateProps) {
-  const t = useTranslations('task-projects.empty_state');
-
-  return (
-    <Card>
-      <CardContent className="flex flex-col items-center justify-center py-12">
-        <Archive className="h-12 w-12 text-muted-foreground" />
-        <h3 className="mt-4 font-semibold text-lg">
-          {hasFilters ? t('no_projects_found') : t('no_projects_yet')}
-        </h3>
-        <p className="text-center text-muted-foreground">
-          {hasFilters ? t('adjust_filters') : t('create_first_project')}
-        </p>
-        {!hasFilters && (
-          <Button className="mt-4" onClick={onCreateClick}>
-            <Plus className="mr-2 h-4 w-4" />
-            {t('create_project')}
-          </Button>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

package/src/components/ui/tu-do/projects/components/projects-loading-state.tsx

@@ -1,26 +0,0 @@
-'use client';
-
-import { Skeleton } from '@tuturuuu/ui/skeleton';
-
-export function ProjectsLoadingState() {
-  return (
-    <div className="space-y-3">
-      {Array.from({ length: 4 }).map((_, index) => (
-        <div key={index} className="rounded-lg border bg-background p-4">
-          <div className="flex items-start justify-between gap-4">
-            <div className="flex-1 space-y-3">
-              <Skeleton className="h-5 w-2/5" />
-              <Skeleton className="h-4 w-4/5" />
-              <div className="flex gap-2">
-                <Skeleton className="h-6 w-20" />
-                <Skeleton className="h-6 w-24" />
-                <Skeleton className="h-6 w-20" />
-              </div>
-            </div>
-            <Skeleton className="h-9 w-28" />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/components/ui/tu-do/projects/components/projects-toolbar.tsx

@@ -1,179 +0,0 @@
-'use client';
-
-import { Grid3x3, List, Plus, Search, X } from '@tuturuuu/icons';
-import { Button } from '@tuturuuu/ui/button';
-import { Input } from '@tuturuuu/ui/input';
-import { cn } from '@tuturuuu/utils/format';
-import { useTranslations } from 'next-intl';
-import type { Dispatch, ReactNode, SetStateAction } from 'react';
-import type {
-  ProjectOperationsStats,
-  SortBy,
-  SortOrder,
-  ViewMode,
-} from '../types';
-import { ProjectFilterMenu } from './project-filter-menu';
-import { ProjectMetrics } from './project-metrics';
-import { ProjectSortMenu } from './project-sort-menu';
-
-interface ProjectsToolbarProps {
-  viewMode: ViewMode;
-  setViewMode: (mode: ViewMode) => void;
-  sortBy: SortBy;
-  setSortBy: (sort: SortBy) => void;
-  sortOrder: SortOrder;
-  setSortOrder: (order: SortOrder) => void;
-  searchQuery: string;
-  setSearchQuery: (query: string) => void;
-  statusFilter: string[];
-  setStatusFilter: Dispatch<SetStateAction<string[]>>;
-  priorityFilter: string[];
-  setPriorityFilter: Dispatch<SetStateAction<string[]>>;
-  healthFilter: string[];
-  setHealthFilter: Dispatch<SetStateAction<string[]>>;
-  hasActiveFilters: boolean;
-  clearFilters: () => void;
-  projectCount: number;
-  filteredCount: number;
-  stats: ProjectOperationsStats;
-  onCreateClick: () => void;
-}
-
-export function ProjectsToolbar({
-  viewMode,
-  setViewMode,
-  sortBy,
-  setSortBy,
-  sortOrder,
-  setSortOrder,
-  searchQuery,
-  setSearchQuery,
-  statusFilter,
-  setStatusFilter,
-  priorityFilter,
-  setPriorityFilter,
-  healthFilter,
-  setHealthFilter,
-  hasActiveFilters,
-  clearFilters,
-  projectCount,
-  filteredCount,
-  stats,
-  onCreateClick,
-}: ProjectsToolbarProps) {
-  const t = useTranslations('task-projects');
-
-  return (
-    <section className="space-y-4 rounded-lg border border-dynamic-surface/60 bg-dynamic-surface/10 p-4">
-      <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
-        <div className="space-y-1">
-          <p className="font-medium text-muted-foreground text-xs">
-            {t('toolbar.command_center')}
-          </p>
-          <h2 className="font-semibold text-xl">{t('toolbar.all_projects')}</h2>
-          <p className="text-muted-foreground text-sm">
-            {projectCount === 1
-              ? t('toolbar.project_count', {
-                  count: filteredCount,
-                  total: projectCount,
-                })
-              : t('toolbar.project_count_plural', {
-                  count: filteredCount,
-                  total: projectCount,
-                })}
-          </p>
-        </div>
-        <Button onClick={onCreateClick} className="w-full gap-2 lg:w-auto">
-          <Plus className="h-4 w-4" />
-          {t('toolbar.new_project')}
-        </Button>
-      </div>
-
-      <ProjectMetrics stats={stats} />
-
-      <div className="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-between">
-        <div className="relative min-w-0 flex-1">
-          <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            placeholder={t('toolbar.search_placeholder')}
-            value={searchQuery}
-            onChange={(event) => setSearchQuery(event.target.value)}
-            className="h-10 rounded-md pr-10 pl-9"
-          />
-          {searchQuery ? (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="absolute top-1/2 right-1 h-8 w-8 -translate-y-1/2"
-              onClick={() => setSearchQuery('')}
-              aria-label={t('toolbar.clear_search')}
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          ) : null}
-        </div>
-
-        <div className="flex flex-wrap items-center gap-2">
-          <ProjectFilterMenu
-            statusFilter={statusFilter}
-            setStatusFilter={setStatusFilter}
-            priorityFilter={priorityFilter}
-            setPriorityFilter={setPriorityFilter}
-            healthFilter={healthFilter}
-            setHealthFilter={setHealthFilter}
-            hasActiveFilters={hasActiveFilters}
-            clearFilters={clearFilters}
-          />
-          <ProjectSortMenu
-            sortBy={sortBy}
-            setSortBy={setSortBy}
-            sortOrder={sortOrder}
-            setSortOrder={setSortOrder}
-          />
-          <div className="flex rounded-md border bg-background p-0.5">
-            <ViewButton
-              active={viewMode === 'list'}
-              label={t('toolbar.list_view')}
-              onClick={() => setViewMode('list')}
-            >
-              <List className="h-4 w-4" />
-            </ViewButton>
-            <ViewButton
-              active={viewMode === 'grid'}
-              label={t('toolbar.grid_view')}
-              onClick={() => setViewMode('grid')}
-            >
-              <Grid3x3 className="h-4 w-4" />
-            </ViewButton>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function ViewButton({
-  active,
-  label,
-  onClick,
-  children,
-}: {
-  active: boolean;
-  label: string;
-  onClick: () => void;
-  children: ReactNode;
-}) {
-  return (
-    <Button
-      type="button"
-      variant="ghost"
-      size="icon"
-      className={cn('h-8 w-8 rounded-sm', active && 'bg-dynamic-surface/60')}
-      onClick={onClick}
-      aria-label={label}
-      aria-pressed={active}
-    >
-      {children}
-    </Button>
-  );
-}