@tuturuuu/ui 0.0.4 → 0.1.0

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

@@ -0,0 +1,78 @@
+'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

@@ -0,0 +1,157 @@
+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

@@ -0,0 +1,68 @@
+'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

@@ -0,0 +1,383 @@
+'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>
+  );
+}