@tuturuuu/ui 0.17.0 → 0.18.0

package/src/components/ui/tu-do/shared/cursor-overlay.tsx

@@ -1,78 +0,0 @@
-'use client';
-
-import { Badge } from '@tuturuuu/ui/badge';
-import type { CursorPosition } from '@tuturuuu/ui/hooks/useCursorTracking';
-
-interface CursorOverlayProps {
-  cursors: Map<string, CursorPosition>;
-  currentUserId?: string;
-  width?: number;
-  height?: number;
-}
-
-export default function CursorOverlay({
-  cursors,
-  width,
-  height,
-}: CursorOverlayProps) {
-  return (
-    <div
-      className="pointer-events-none absolute inset-0 z-50"
-      style={{
-        width: width ? `${width}px` : undefined,
-        height: height ? `${height}px` : undefined,
-      }}
-    >
-      {Array.from(cursors.entries()).map(([userId, cursor]) => {
-        const { x, y, user } = cursor;
-
-        // Don't render if cursor is outside the visible area
-        if (x < 0 || y < 0) return null;
-
-        return (
-          <div
-            key={userId}
-            className="pointer-events-none absolute z-50"
-            style={{
-              transform: `translate(${x}px, ${y}px)`,
-            }}
-          >
-            {/* Filled cursor indicator with stroke for visibility */}
-            <div className="absolute z-10">
-              <svg
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>Cursor</title>
-                {/* White stroke for visibility over any background */}
-                <path
-                  d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className="stroke-background"
-                />
-                {/* Filled cursor */}
-                <path
-                  d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"
-                  fill="currentColor"
-                  className="text-foreground"
-                />
-              </svg>
-            </div>
-
-            {/* Badge */}
-            <Badge className="absolute top-4 left-4 border-2 border-background bg-background px-1 py-0.5 ring-1 ring-border transition-shadow hover:ring-2">
-              <p className="font-medium text-foreground text-xs">
-                {user?.display_name || 'Unknown User'}
-              </p>
-            </Badge>
-          </div>
-        );
-      })}
-    </div>
-  );
-}

package/src/components/ui/tu-do/shared/custom-date-picker/custom-date-picker-dialog.tsx

@@ -1,157 +0,0 @@
-import { Button } from '@tuturuuu/ui/button';
-import { Calendar as CalendarComponent } from '@tuturuuu/ui/calendar';
-import { Label } from '@tuturuuu/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@tuturuuu/ui/select';
-import { Switch } from '@tuturuuu/ui/switch';
-
-interface CustomDatePickerDialogProps {
-  selectedDate: Date | undefined;
-  includeTime: boolean;
-  selectedHour: string;
-  selectedMinute: string;
-  selectedPeriod: 'AM' | 'PM';
-  onDateSelect: (date: Date | undefined) => void;
-  onIncludeTimeChange: (checked: boolean) => void;
-  onHourChange: (hour: string) => void;
-  onMinuteChange: (minute: string) => void;
-  onPeriodChange: (period: 'AM' | 'PM') => void;
-  onCancel: () => void;
-  onInsert: () => void;
-  preferences?: {
-    weekStartsOn?: 0 | 1 | 6;
-    timezone?: string;
-  };
-}
-
-export function CustomDatePickerDialog({
-  selectedDate,
-  includeTime,
-  selectedHour,
-  selectedMinute,
-  selectedPeriod,
-  onDateSelect,
-  onIncludeTimeChange,
-  onHourChange,
-  onMinuteChange,
-  onPeriodChange,
-  onCancel,
-  onInsert,
-  preferences,
-}: CustomDatePickerDialogProps) {
-  return (
-    <div
-      className="pointer-events-auto w-80 rounded-lg border border-border bg-popover p-4 shadow-lg"
-      onMouseDown={(e) => {
-        e.stopPropagation();
-      }}
-    >
-      <div className="mb-2 font-medium text-foreground text-sm">
-        Select custom date
-      </div>
-      <CalendarComponent
-        mode="single"
-        selected={selectedDate}
-        onSelect={onDateSelect}
-        className="rounded-md border p-0"
-        preferences={preferences}
-      />
-      <div className="mt-3 flex items-center gap-2 rounded-md border p-2">
-        <Switch checked={includeTime} onCheckedChange={onIncludeTimeChange} />
-        <Label htmlFor="include-time" className="cursor-pointer text-sm">
-          Include time
-        </Label>
-      </div>
-      {includeTime && (
-        <div className="mt-2 flex items-center gap-2">
-          <Label className="text-sm">Time:</Label>
-          <Select value={selectedHour} onValueChange={onHourChange}>
-            <SelectTrigger className="w-20">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {Array.from({ length: 12 }, (_, i) => {
-                const hour = i + 1;
-                return (
-                  <SelectItem key={hour} value={hour.toString()}>
-                    {hour}
-                  </SelectItem>
-                );
-              })}
-            </SelectContent>
-          </Select>
-          <span>:</span>
-          <Select value={selectedMinute} onValueChange={onMinuteChange}>
-            <SelectTrigger className="w-20">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {['00', '15', '30', '45', '59'].map((min) => (
-                <SelectItem key={min} value={min}>
-                  {min}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <div className="flex rounded-md border">
-            <Button
-              type="button"
-              size="sm"
-              variant={selectedPeriod === 'AM' ? 'default' : 'ghost'}
-              className="h-8 rounded-r-none px-3"
-              onClick={(e) => {
-                e.stopPropagation();
-                onPeriodChange('AM');
-              }}
-            >
-              AM
-            </Button>
-            <Button
-              type="button"
-              size="sm"
-              variant={selectedPeriod === 'PM' ? 'default' : 'ghost'}
-              className="h-8 rounded-l-none px-3"
-              onClick={(e) => {
-                e.stopPropagation();
-                onPeriodChange('PM');
-              }}
-            >
-              PM
-            </Button>
-          </div>
-        </div>
-      )}
-      <div className="mt-3 flex justify-end gap-2">
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            onCancel();
-          }}
-        >
-          Cancel
-        </Button>
-        <Button
-          type="button"
-          size="sm"
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            onInsert();
-          }}
-          disabled={!selectedDate}
-        >
-          Insert
-        </Button>
-      </div>
-    </div>
-  );
-}

package/src/components/ui/tu-do/shared/description-overflow-warning-dialog.tsx

@@ -1,68 +0,0 @@
-'use client';
-
-import { AlertTriangle, FileWarning } from '@tuturuuu/icons';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@tuturuuu/ui/alert-dialog';
-
-interface DescriptionOverflowWarningDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onConfirmClose: () => void;
-  title: string;
-  description: string;
-  warningMessage: string;
-  cancelLabel: string;
-  confirmLabel: string;
-}
-
-export function DescriptionOverflowWarningDialog({
-  open,
-  onOpenChange,
-  onConfirmClose,
-  title,
-  description,
-  warningMessage,
-  cancelLabel,
-  confirmLabel,
-}: DescriptionOverflowWarningDialogProps) {
-  return (
-    <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <div className="flex items-start gap-3">
-            <div className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-dynamic-yellow/10 text-dynamic-yellow">
-              <FileWarning className="h-5 w-5" />
-            </div>
-            <div className="space-y-1">
-              <AlertDialogTitle>{title}</AlertDialogTitle>
-              <AlertDialogDescription>{description}</AlertDialogDescription>
-            </div>
-          </div>
-        </AlertDialogHeader>
-        <div className="rounded-md border border-dynamic-yellow/30 bg-dynamic-yellow/5 px-3 py-2">
-          <div className="flex items-center gap-2 text-dynamic-yellow text-xs">
-            <AlertTriangle className="h-4 w-4" />
-            <span>{warningMessage}</span>
-          </div>
-        </div>
-        <AlertDialogFooter>
-          <AlertDialogCancel>{cancelLabel}</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={onConfirmClose}
-            className="bg-dynamic-red text-white hover:bg-dynamic-red/90"
-          >
-            {confirmLabel}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-}

package/src/components/ui/tu-do/shared/edit-list-dialog.tsx

@@ -1,383 +0,0 @@
-'use client';
-
-import {
-  Circle,
-  CircleCheck,
-  CircleDashed,
-  CircleX,
-  ClipboardCheck,
-  FileText,
-} from '@tuturuuu/icons';
-import type { SupportedColor } from '@tuturuuu/types/primitives/SupportedColors';
-import type { TaskBoardStatus } from '@tuturuuu/types/primitives/TaskBoard';
-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 {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@tuturuuu/ui/select';
-import { cn } from '@tuturuuu/utils/format';
-import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
-
-type EditableList = {
-  id: string;
-  name: string;
-  status?: TaskBoardStatus | null;
-  color?: SupportedColor | null;
-};
-
-interface EditListDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  list: EditableList | null;
-  allowedStatuses?: TaskBoardStatus[];
-  isSaving?: boolean;
-  onSave: (payload: {
-    listId: string;
-    updates: {
-      name: string;
-      status: TaskBoardStatus;
-      color: SupportedColor;
-    };
-  }) => void;
-}
-
-const statusConfig = {
-  not_started: {
-    icon: CircleDashed,
-    color: 'text-dynamic-gray',
-  },
-  active: {
-    icon: Circle,
-    color: 'text-dynamic-blue',
-  },
-  review: {
-    icon: ClipboardCheck,
-    color: 'text-dynamic-orange',
-  },
-  done: {
-    icon: CircleCheck,
-    color: 'text-dynamic-green',
-  },
-  closed: {
-    icon: CircleX,
-    color: 'text-dynamic-purple',
-  },
-  documents: {
-    icon: FileText,
-    color: 'text-dynamic-cyan',
-  },
-};
-
-const statuses: TaskBoardStatus[] = [
-  'documents',
-  'not_started',
-  'active',
-  'review',
-  'done',
-  'closed',
-];
-
-export function EditListDialog({
-  open,
-  onOpenChange,
-  list,
-  allowedStatuses,
-  isSaving = false,
-  onSave,
-}: EditListDialogProps) {
-  const t = useTranslations('common');
-
-  if (!open || !list) {
-    return null;
-  }
-
-  return (
-    <EditListDialogForm
-      key={list.id}
-      list={list}
-      allowedStatuses={allowedStatuses}
-      isSaving={isSaving}
-      onOpenChange={onOpenChange}
-      onSave={onSave}
-      labels={{
-        active: t('active'),
-        backlog: t('backlog'),
-        blue: t('blue'),
-        cancel: t('cancel'),
-        closed: t('closed'),
-        color: t('color'),
-        cyan: t('cyan'),
-        documents: t('documents'),
-        done: t('done'),
-        editList: t('edit_list'),
-        gray: t('gray'),
-        green: t('green'),
-        indigo: t('indigo'),
-        listName: t('list_name'),
-        orange: t('orange'),
-        pink: t('pink'),
-        purple: t('purple'),
-        red: t('red'),
-        review: t('list_name_review'),
-        saveChanges: t('save_changes'),
-        saving: t('saving'),
-        statusCategory: t('status_category'),
-        updateListDescription: t('change_list_name'),
-        yellow: t('yellow'),
-      }}
-    />
-  );
-}
-
-function EditListDialogForm({
-  list,
-  allowedStatuses,
-  onOpenChange,
-  isSaving,
-  onSave,
-  labels,
-}: {
-  list: EditableList;
-  allowedStatuses?: TaskBoardStatus[];
-  onOpenChange: (open: boolean) => void;
-  isSaving: boolean;
-  onSave: EditListDialogProps['onSave'];
-  labels: {
-    active: string;
-    backlog: string;
-    blue: string;
-    cancel: string;
-    closed: string;
-    color: string;
-    cyan: string;
-    documents: string;
-    done: string;
-    editList: string;
-    gray: string;
-    green: string;
-    indigo: string;
-    listName: string;
-    orange: string;
-    pink: string;
-    purple: string;
-    red: string;
-    review: string;
-    saveChanges: string;
-    saving: string;
-    statusCategory: string;
-    updateListDescription: string;
-    yellow: string;
-  };
-}) {
-  const resolvedAllowedStatuses = useMemo(() => {
-    if (allowedStatuses && allowedStatuses.length > 0) {
-      return allowedStatuses;
-    }
-
-    return statuses;
-  }, [allowedStatuses]);
-
-  const defaultStatus = useMemo<TaskBoardStatus>(() => {
-    if (list.status && resolvedAllowedStatuses.includes(list.status)) {
-      return list.status;
-    }
-
-    return resolvedAllowedStatuses.find(() => true) ?? 'active';
-  }, [list.status, resolvedAllowedStatuses]);
-
-  const [name, setName] = useState(list.name ?? '');
-  const [status, setStatus] = useState<TaskBoardStatus>(defaultStatus);
-  const [color, setColor] = useState<SupportedColor>(list.color ?? 'GRAY');
-  const selectedStatus = resolvedAllowedStatuses.includes(status)
-    ? status
-    : defaultStatus;
-
-  const statusLabels: Record<TaskBoardStatus, string> = {
-    not_started: labels.backlog,
-    active: labels.active,
-    review: labels.review,
-    done: labels.done,
-    closed: labels.closed,
-    documents: labels.documents,
-  };
-
-  const colorOptions = [
-    {
-      value: 'GRAY' as SupportedColor,
-      label: labels.gray,
-      class: 'bg-dynamic-gray/30',
-    },
-    {
-      value: 'RED' as SupportedColor,
-      label: labels.red,
-      class: 'bg-dynamic-red/30',
-    },
-    {
-      value: 'BLUE' as SupportedColor,
-      label: labels.blue,
-      class: 'bg-dynamic-blue/30',
-    },
-    {
-      value: 'GREEN' as SupportedColor,
-      label: labels.green,
-      class: 'bg-dynamic-green/30',
-    },
-    {
-      value: 'YELLOW' as SupportedColor,
-      label: labels.yellow,
-      class: 'bg-dynamic-yellow/30',
-    },
-    {
-      value: 'ORANGE' as SupportedColor,
-      label: labels.orange,
-      class: 'bg-dynamic-orange/30',
-    },
-    {
-      value: 'PURPLE' as SupportedColor,
-      label: labels.purple,
-      class: 'bg-dynamic-purple/30',
-    },
-    {
-      value: 'PINK' as SupportedColor,
-      label: labels.pink,
-      class: 'bg-dynamic-pink/30',
-    },
-    {
-      value: 'INDIGO' as SupportedColor,
-      label: labels.indigo,
-      class: 'bg-dynamic-indigo/30',
-    },
-    {
-      value: 'CYAN' as SupportedColor,
-      label: labels.cyan,
-      class: 'bg-dynamic-cyan/30',
-    },
-  ];
-
-  return (
-    <Dialog open onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-106.25">
-        <DialogHeader>
-          <DialogTitle>{labels.editList}</DialogTitle>
-          <DialogDescription>{labels.updateListDescription}</DialogDescription>
-        </DialogHeader>
-
-        <form
-          className="grid gap-4"
-          onSubmit={(event) => {
-            event.preventDefault();
-            const trimmedName = name.trim();
-            if (!trimmedName) {
-              return;
-            }
-            if (!resolvedAllowedStatuses.includes(selectedStatus)) {
-              return;
-            }
-            onSave({
-              listId: list.id,
-              updates: {
-                name: trimmedName,
-                status: selectedStatus,
-                color,
-              },
-            });
-          }}
-        >
-          <div className="space-y-2">
-            <Label htmlFor="edit-list-name">{labels.listName}</Label>
-            <Input
-              id="edit-list-name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder={labels.listName}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="edit-list-status">{labels.statusCategory}</Label>
-            <Select
-              value={selectedStatus}
-              onValueChange={(value) => {
-                const nextStatus = value as TaskBoardStatus;
-                if (!resolvedAllowedStatuses.includes(nextStatus)) {
-                  return;
-                }
-                setStatus(nextStatus);
-              }}
-            >
-              <SelectTrigger id="edit-list-status">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {resolvedAllowedStatuses.map((itemStatus) => {
-                  const Icon = statusConfig[itemStatus].icon;
-                  return (
-                    <SelectItem key={itemStatus} value={itemStatus}>
-                      <div className="flex items-center gap-2">
-                        <Icon
-                          className={cn(
-                            'h-4 w-4',
-                            statusConfig[itemStatus].color
-                          )}
-                        />
-                        {statusLabels[itemStatus]}
-                      </div>
-                    </SelectItem>
-                  );
-                })}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="space-y-2">
-            <Label>{labels.color}</Label>
-            <div className="grid grid-cols-5 gap-3">
-              {colorOptions.map((colorOption) => (
-                <button
-                  type="button"
-                  key={colorOption.value}
-                  onClick={() => setColor(colorOption.value)}
-                  className={cn(
-                    'h-10 w-10 rounded-lg border-2 transition-all hover:scale-105',
-                    colorOption.class,
-                    color === colorOption.value &&
-                      'scale-110 ring-1 ring-primary ring-offset-2 ring-offset-background'
-                  )}
-                  title={colorOption.label}
-                />
-              ))}
-            </div>
-          </div>
-
-          <DialogFooter>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => onOpenChange(false)}
-              disabled={isSaving}
-            >
-              {labels.cancel}
-            </Button>
-            <Button type="submit" disabled={isSaving || !name.trim()}>
-              {isSaving ? labels.saving : labels.saveChanges}
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}