@tuturuuu/ui 0.16.0 → 0.18.0

package/src/components/ui/tu-do/labels/components/label-dialog.tsx

@@ -1,259 +0,0 @@
-'use client';
-
-import { Check, Palette, Shuffle } 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 { Input } from '@tuturuuu/ui/input';
-import { Label } from '@tuturuuu/ui/label';
-import {
-  computeAccessibleLabelStyles,
-  getRandomLabelColor,
-} from '@tuturuuu/ui/tu-do/utils/label-colors';
-import { cn } from '@tuturuuu/utils/format';
-import { useTranslations } from 'next-intl';
-import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
-import { colorPresets, type TaskLabel } from '../types';
-
-interface LabelDialogProps {
-  label: TaskLabel | null;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSubmit: (data: { name: string; color: string }) => Promise<void>;
-  isSubmitting: boolean;
-}
-
-export function LabelDialog({
-  label,
-  open,
-  onOpenChange,
-  onSubmit,
-  isSubmitting,
-}: LabelDialogProps) {
-  const t = useTranslations('ws-tasks-labels');
-  const { resolvedTheme } = useTheme();
-  const isDark = resolvedTheme === 'dark';
-
-  const [formData, setFormData] = useState<{
-    name: string;
-    color: string;
-  }>({
-    name: '',
-    color: getRandomLabelColor(),
-  });
-
-  useEffect(() => {
-    if (!open) return;
-
-    if (label) {
-      setFormData({
-        name: label.name,
-        color: label.color,
-      });
-    } else {
-      setFormData((prev) => ({
-        name: '',
-        color: getRandomLabelColor(prev.color),
-      }));
-    }
-  }, [label, open]);
-
-  const handleSubmit = async () => {
-    if (!formData.name.trim()) return;
-    await onSubmit(formData);
-  };
-
-  const handleRandomColor = () => {
-    setFormData((prev) => ({
-      ...prev,
-      color: getRandomLabelColor(prev.color),
-    }));
-  };
-
-  const previewStyles = computeAccessibleLabelStyles(
-    formData.color || '#EF4444',
-    !!isDark
-  );
-  const colorInputValue = /^#[0-9a-fA-F]{6}$/.test(formData.color)
-    ? formData.color
-    : '#000000';
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[37.5rem]">
-        <DialogHeader>
-          <div className="flex items-start gap-3">
-            <div
-              className="rounded-md border p-3"
-              style={{
-                backgroundColor: formData.color,
-                borderColor: formData.color,
-              }}
-            >
-              <Palette
-                className="h-5 w-5"
-                style={{ color: getReadableSwatchForeground(formData.color) }}
-              />
-            </div>
-            <div className="min-w-0 space-y-1">
-              <DialogTitle>
-                {label ? t('edit_label') : t('create_label')}
-              </DialogTitle>
-              <DialogDescription>
-                {label ? t('edit_description') : t('create_description')}
-              </DialogDescription>
-            </div>
-          </div>
-        </DialogHeader>
-        <div className="space-y-6">
-          <div className="space-y-2">
-            <Label htmlFor="name">{t('label_name')}</Label>
-            <Input
-              id="name"
-              placeholder={t('name_placeholder')}
-              value={formData.name}
-              onChange={(e) =>
-                setFormData((prev) => ({ ...prev, name: e.target.value }))
-              }
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && formData.name.trim()) {
-                  handleSubmit();
-                }
-              }}
-              autoFocus
-            />
-          </div>
-          <div className="space-y-3">
-            <div className="flex items-center justify-between gap-3">
-              <Label>{t('color')}</Label>
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="h-8 w-8"
-                onClick={handleRandomColor}
-                title={t('randomize_color')}
-              >
-                <Shuffle className="h-4 w-4" />
-                <span className="sr-only">{t('randomize_color')}</span>
-              </Button>
-            </div>
-            <div className="grid grid-cols-5 gap-2 sm:grid-cols-10">
-              {colorPresets.map((color) => (
-                <button
-                  key={color}
-                  type="button"
-                  className={cn(
-                    'h-10 rounded-md border-2 transition-transform hover:scale-105',
-                    formData.color === color
-                      ? 'border-foreground ring-2 ring-foreground/20 ring-offset-2'
-                      : 'border-border hover:border-foreground/50'
-                  )}
-                  style={{ backgroundColor: color }}
-                  onClick={() => setFormData((prev) => ({ ...prev, color }))}
-                  aria-label={t('select_color', { color })}
-                >
-                  {formData.color === color && (
-                    <Check
-                      className="m-auto h-4 w-4"
-                      style={{ color: getReadableSwatchForeground(color) }}
-                    />
-                  )}
-                </button>
-              ))}
-            </div>
-            <div className="grid gap-3 rounded-lg border bg-muted/30 p-3 sm:grid-cols-[1fr_auto] sm:items-end">
-              <div className="space-y-2">
-                <Label htmlFor="custom-label-color">{t('custom_hex')}</Label>
-                <div className="flex gap-2">
-                  <Input
-                    id="custom-label-color"
-                    value={formData.color}
-                    maxLength={7}
-                    onChange={(e) =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        color: e.target.value,
-                      }))
-                    }
-                  />
-                  <Input
-                    type="color"
-                    value={colorInputValue}
-                    onChange={(e) =>
-                      setFormData((prev) => ({
-                        ...prev,
-                        color: e.target.value,
-                      }))
-                    }
-                    className="h-10 w-12 cursor-pointer rounded-md border p-1"
-                    title={t('custom_color')}
-                  />
-                </div>
-              </div>
-              <div className="space-y-2">
-                <p className="text-muted-foreground text-xs">{t('preview')}</p>
-                <Badge
-                  variant="outline"
-                  style={
-                    previewStyles
-                      ? {
-                          backgroundColor: previewStyles.bg,
-                          borderColor: previewStyles.border,
-                          color: previewStyles.text,
-                        }
-                      : undefined
-                  }
-                  className="max-w-full truncate font-medium"
-                >
-                  {formData.name || t('preview_text')}
-                </Badge>
-              </div>
-            </div>
-          </div>
-          <DialogFooter className="gap-2">
-            <Button
-              variant="outline"
-              onClick={() => onOpenChange(false)}
-              disabled={isSubmitting}
-            >
-              {t('cancel')}
-            </Button>
-            <Button
-              onClick={handleSubmit}
-              disabled={isSubmitting || !formData.name.trim()}
-            >
-              {isSubmitting
-                ? label
-                  ? t('updating')
-                  : t('creating')
-                : label
-                  ? t('update_label')
-                  : t('create_label')}
-            </Button>
-          </DialogFooter>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function getReadableSwatchForeground(color: string) {
-  const normalized = color.replace('#', '');
-  if (!/^[0-9a-fA-F]{6}$/.test(normalized)) return undefined;
-
-  const red = Number.parseInt(normalized.slice(0, 2), 16);
-  const green = Number.parseInt(normalized.slice(2, 4), 16);
-  const blue = Number.parseInt(normalized.slice(4, 6), 16);
-  const luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;
-
-  return luminance > 0.58 ? '#111827' : '#FFFFFF';
-}

package/src/components/ui/tu-do/labels/components/label-list.tsx

@@ -1,83 +0,0 @@
-import { Plus, Search, Tag } from '@tuturuuu/icons';
-import { Button } from '@tuturuuu/ui/button';
-import { useTranslations } from 'next-intl';
-import type { TaskLabel } from '../types';
-import { LabelCard } from './label-card';
-
-interface LabelListProps {
-  labels: TaskLabel[];
-  filteredLabels: TaskLabel[];
-  searchQuery: string;
-  onSearchChange: (query: string) => void;
-  onCreateClick: () => void;
-  onEditClick: (label: TaskLabel) => void;
-  onDeleteClick: (label: TaskLabel) => void;
-}
-
-export function LabelList({
-  labels,
-  filteredLabels,
-  searchQuery,
-  onSearchChange,
-  onCreateClick,
-  onEditClick,
-  onDeleteClick,
-}: LabelListProps) {
-  const t = useTranslations('ws-tasks-labels');
-
-  if (labels.length === 0) {
-    return (
-      <div className="rounded-lg border bg-background p-10 text-center">
-        <div className="mx-auto flex max-w-md flex-col items-center gap-5">
-          <div className="rounded-md border bg-muted p-4">
-            <Tag className="h-8 w-8 text-muted-foreground" />
-          </div>
-          <div className="space-y-2">
-            <h3 className="font-semibold text-xl">{t('no_labels')}</h3>
-            <p className="text-muted-foreground">
-              {t('no_labels_description')}
-            </p>
-          </div>
-          <Button onClick={onCreateClick} size="lg">
-            <Plus className="mr-2 h-4 w-4" />
-            {t('create_first_label')}
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  if (filteredLabels.length === 0) {
-    return (
-      <div className="rounded-lg border bg-background p-10 text-center">
-        <div className="mx-auto flex max-w-md flex-col items-center gap-5">
-          <div className="rounded-md border bg-muted p-4">
-            <Search className="h-8 w-8 text-muted-foreground" />
-          </div>
-          <div className="space-y-2">
-            <h3 className="font-semibold text-xl">{t('no_results')}</h3>
-            <p className="text-muted-foreground">
-              {t('no_results_description', { query: searchQuery })}
-            </p>
-          </div>
-          <Button variant="outline" onClick={() => onSearchChange('')}>
-            {t('clear_search')}
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
-      {filteredLabels.map((label) => (
-        <LabelCard
-          key={label.id}
-          label={label}
-          onEdit={onEditClick}
-          onDelete={onDeleteClick}
-        />
-      ))}
-    </div>
-  );
-}

package/src/components/ui/tu-do/labels/hooks/use-task-labels.ts

@@ -1,170 +0,0 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import {
-  createWorkspaceLabel,
-  deleteWorkspaceLabel,
-  listWorkspaceLabels,
-  updateWorkspaceLabel,
-} from '@tuturuuu/internal-api/tasks';
-import { toast } from '@tuturuuu/ui/sonner';
-import { useTranslations } from 'next-intl';
-import type { TaskLabel } from '../types';
-
-interface UseTaskLabelsProps {
-  wsId: string;
-  initialLabels: TaskLabel[];
-}
-
-function getBrowserInternalApiOptions() {
-  return typeof window !== 'undefined'
-    ? { baseUrl: window.location.origin }
-    : undefined;
-}
-
-export function useTaskLabels({ wsId, initialLabels }: UseTaskLabelsProps) {
-  const t = useTranslations('ws-tasks-labels');
-  const queryClient = useQueryClient();
-  const queryKey = ['task-labels', wsId];
-
-  const { data: labels = initialLabels } = useQuery({
-    queryKey,
-    queryFn: async () =>
-      listWorkspaceLabels(wsId, getBrowserInternalApiOptions()),
-    initialData: initialLabels,
-  });
-
-  const { mutateAsync: createLabelMutation, isPending: isCreating } =
-    useMutation({
-      mutationFn: async (data: { name: string; color: string }) => {
-        return createWorkspaceLabel(
-          wsId,
-          {
-            name: data.name.trim(),
-            color: data.color,
-          },
-          getBrowserInternalApiOptions()
-        );
-      },
-      onMutate: async (newLabel) => {
-        await queryClient.cancelQueries({ queryKey });
-        const previousLabels = queryClient.getQueryData<TaskLabel[]>(queryKey);
-
-        const optimisticLabel: TaskLabel = {
-          id: `temp-${Date.now()}`,
-          name: newLabel.name.trim(),
-          color: newLabel.color,
-          ws_id: wsId,
-          created_at: new Date().toISOString(),
-          creator_id: null,
-        };
-
-        queryClient.setQueryData<TaskLabel[]>(queryKey, (old) => [
-          optimisticLabel,
-          ...(old || []),
-        ]);
-
-        return { previousLabels };
-      },
-      onError: (_err, _newLabel, context) => {
-        if (context?.previousLabels) {
-          queryClient.setQueryData(queryKey, context.previousLabels);
-        }
-        toast.error(t('error_create'));
-      },
-      onSuccess: () => {
-        toast.success(t('success_create'));
-      },
-      onSettled: () => {
-        queryClient.invalidateQueries({ queryKey });
-      },
-    });
-
-  const { mutateAsync: updateLabelMutation, isPending: isUpdating } =
-    useMutation({
-      mutationFn: async ({
-        id,
-        ...data
-      }: {
-        id: string;
-        name: string;
-        color: string;
-      }) => {
-        return updateWorkspaceLabel(
-          wsId,
-          id,
-          {
-            name: data.name.trim(),
-            color: data.color,
-          },
-          getBrowserInternalApiOptions()
-        );
-      },
-      onMutate: async ({ id, ...data }) => {
-        await queryClient.cancelQueries({ queryKey });
-        const previousLabels = queryClient.getQueryData<TaskLabel[]>(queryKey);
-
-        queryClient.setQueryData<TaskLabel[]>(queryKey, (old) =>
-          (old || []).map((label) =>
-            label.id === id
-              ? { ...label, name: data.name.trim(), color: data.color }
-              : label
-          )
-        );
-
-        return { previousLabels };
-      },
-      onError: (_err, _variables, context) => {
-        if (context?.previousLabels) {
-          queryClient.setQueryData(queryKey, context.previousLabels);
-        }
-        toast.error(t('error_update'));
-      },
-      onSuccess: () => {
-        toast.success(t('success_update'));
-      },
-      onSettled: () => {
-        queryClient.invalidateQueries({ queryKey });
-      },
-    });
-
-  const { mutateAsync: deleteLabelMutation, isPending: isDeleting } =
-    useMutation({
-      mutationFn: async (labelId: string) => {
-        await deleteWorkspaceLabel(
-          wsId,
-          labelId,
-          getBrowserInternalApiOptions()
-        );
-      },
-      onMutate: async (labelId) => {
-        await queryClient.cancelQueries({ queryKey });
-        const previousLabels = queryClient.getQueryData<TaskLabel[]>(queryKey);
-
-        queryClient.setQueryData<TaskLabel[]>(queryKey, (old) =>
-          (old || []).filter((label) => label.id !== labelId)
-        );
-
-        return { previousLabels };
-      },
-      onError: (_err, _labelId, context) => {
-        if (context?.previousLabels) {
-          queryClient.setQueryData(queryKey, context.previousLabels);
-        }
-        toast.error(t('error_delete'));
-      },
-      onSuccess: () => {
-        toast.success(t('success_delete'));
-      },
-      onSettled: () => {
-        queryClient.invalidateQueries({ queryKey });
-      },
-    });
-
-  return {
-    labels,
-    isSubmitting: isCreating || isUpdating || isDeleting,
-    createLabel: createLabelMutation,
-    updateLabel: (labelId: string, data: { name: string; color: string }) =>
-      updateLabelMutation({ id: labelId, ...data }),
-    deleteLabel: deleteLabelMutation,
-  };
-}

package/src/components/ui/tu-do/labels/task-labels-page.tsx

@@ -1,53 +0,0 @@
-import { createClient } from '@tuturuuu/supabase/next/server';
-import TaskLabelsClient from '@tuturuuu/ui/tu-do/labels/client';
-import type { TaskLabel } from '@tuturuuu/ui/tu-do/labels/types';
-import { getCurrentUser } from '@tuturuuu/utils/user-helper';
-import { getPermissions, getWorkspace } from '@tuturuuu/utils/workspace-helper';
-import { notFound, redirect } from 'next/navigation';
-
-interface Props {
-  params: Promise<{
-    wsId: string;
-  }>;
-}
-
-/**
- * Shared Task Labels Page component.
- * Handles workspace resolution, permissions, and data fetching.
- * Used by both apps/web and apps/tasks.
- */
-export default async function TaskLabelsPage({ params }: Props) {
-  const { wsId: id } = await params;
-
-  const user = await getCurrentUser();
-  if (!user) redirect('/login');
-
-  const workspace = await getWorkspace(id);
-  if (!workspace) notFound();
-
-  const wsId = workspace.id;
-
-  const permissions = await getPermissions({ wsId });
-  if (!permissions) notFound();
-  const { withoutPermission } = permissions;
-  if (withoutPermission('manage_projects')) redirect(`/${wsId}`);
-
-  const supabase = await createClient();
-  const { data: labels, error } = await supabase
-    .from('workspace_task_labels')
-    .select('*')
-    .eq('ws_id', wsId)
-    .order('created_at', { ascending: false });
-
-  if (error) {
-    console.error('Error fetching task labels:', error);
-    // Continue with empty labels instead of notFound
-  }
-
-  return (
-    <TaskLabelsClient
-      wsId={wsId}
-      initialLabels={(labels ?? []) as TaskLabel[]}
-    />
-  );
-}

package/src/components/ui/tu-do/labels/types.ts

@@ -1,6 +0,0 @@
-import type { TaskLabel } from '@tuturuuu/types';
-import { LABEL_COLOR_PRESETS } from '../utils/label-colors';
-
-export type { TaskLabel };
-
-export const colorPresets = LABEL_COLOR_PRESETS;