@tuturuuu/ui 0.17.0 → 0.18.0

package/src/components/ui/tu-do/boards/boardId/task-card/task-scheduling-badge.tsx

@@ -1,174 +0,0 @@
-import type { CalendarHoursType } from '@tuturuuu/types/primitives/Task';
-import { Badge } from '@tuturuuu/ui/badge';
-import { cn } from '@tuturuuu/utils/format';
-import type { ReactElement, SVGProps } from 'react';
-import {
-  formatTaskDurationLabel,
-  formatTaskSchedulingBadgeTitle,
-  type TaskSchedulingBadgeTitleLabels,
-} from '../menus/task-scheduling-utils';
-
-function WorkScheduleIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg aria-hidden="true" fill="none" viewBox="0 0 16 16" {...props}>
-      <path
-        d="M5.75 4.25V3.5A1.5 1.5 0 0 1 7.25 2h1.5a1.5 1.5 0 0 1 1.5 1.5v.75"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M3.5 4.5h9A1.5 1.5 0 0 1 14 6v5.25A1.75 1.75 0 0 1 12.25 13h-8.5A1.75 1.75 0 0 1 2 11.25V6a1.5 1.5 0 0 1 1.5-1.5Z"
-        stroke="currentColor"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M2.25 7.5h11.5M7 7.5v1h2v-1"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeWidth="1.5"
-      />
-    </svg>
-  );
-}
-
-function PersonalScheduleIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg aria-hidden="true" fill="none" viewBox="0 0 16 16" {...props}>
-      <path
-        d="M2.75 7.25 8 3l5.25 4.25"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M4.25 6.75v5A1.25 1.25 0 0 0 5.5 13h5a1.25 1.25 0 0 0 1.25-1.25v-5"
-        stroke="currentColor"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M6.5 13V9.75h3V13"
-        stroke="currentColor"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-    </svg>
-  );
-}
-
-function MeetingScheduleIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg aria-hidden="true" fill="none" viewBox="0 0 16 16" {...props}>
-      <path
-        d="M5.25 7a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5ZM10.75 7a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z"
-        stroke="currentColor"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M2.75 12.5v-.75A2.75 2.75 0 0 1 5.5 9h.25M13.25 12.5v-.75A2.75 2.75 0 0 0 10.5 9h-.25M6.75 10.5h2.5"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeWidth="1.5"
-      />
-    </svg>
-  );
-}
-
-function AutoScheduleMark(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg aria-hidden="true" fill="none" viewBox="0 0 10 10" {...props}>
-      <path
-        d="M5.75 1.25 2.5 5.4h2.35l-.6 3.35L7.5 4.6H5.15l.6-3.35Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
-const SCHEDULE_BADGE_CONFIG = {
-  meeting_hours: {
-    className:
-      'border-dynamic-orange/35 bg-dynamic-orange/10 text-dynamic-orange',
-    Icon: MeetingScheduleIcon,
-  },
-  personal_hours: {
-    className: 'border-dynamic-green/35 bg-dynamic-green/10 text-dynamic-green',
-    Icon: PersonalScheduleIcon,
-  },
-  work_hours: {
-    className: 'border-dynamic-blue/35 bg-dynamic-blue/10 text-dynamic-blue',
-    Icon: WorkScheduleIcon,
-  },
-} satisfies Record<
-  CalendarHoursType,
-  {
-    className: string;
-    Icon: (props: SVGProps<SVGSVGElement>) => ReactElement;
-  }
->;
-
-function getScheduleBadgeConfig(calendarHours: CalendarHoursType | null) {
-  return calendarHours
-    ? SCHEDULE_BADGE_CONFIG[calendarHours]
-    : {
-        className:
-          'border-dynamic-gray/30 bg-dynamic-gray/10 text-dynamic-gray',
-        Icon: WorkScheduleIcon,
-      };
-}
-
-export function TaskSchedulingBadge({
-  autoSchedule,
-  calendarHours,
-  isSplittable,
-  labels,
-  maxSplitDurationMinutes,
-  minSplitDurationMinutes,
-  onElement,
-  totalDuration,
-}: {
-  autoSchedule?: boolean | null;
-  calendarHours?: CalendarHoursType | null;
-  isSplittable?: boolean | null;
-  labels: TaskSchedulingBadgeTitleLabels;
-  maxSplitDurationMinutes?: number | null;
-  minSplitDurationMinutes?: number | null;
-  onElement?: (element: HTMLElement | null) => void;
-  totalDuration?: number | null;
-}) {
-  const durationLabel = formatTaskDurationLabel(totalDuration ?? null);
-  if (!durationLabel) return null;
-
-  const scheduleBadgeConfig = getScheduleBadgeConfig(calendarHours ?? null);
-  const ScheduleIcon = scheduleBadgeConfig.Icon;
-  const schedulingTitle = formatTaskSchedulingBadgeTitle({
-    autoSchedule,
-    calendarHours,
-    durationLabel,
-    isSplittable,
-    labels,
-    maxSplitDurationMinutes,
-    minSplitDurationMinutes,
-  });
-
-  return (
-    <Badge
-      variant="secondary"
-      className={cn(
-        'h-5 shrink-0 border px-1.5 font-medium text-[10px]',
-        scheduleBadgeConfig.className
-      )}
-      title={schedulingTitle}
-      ref={(element) => onElement?.(element as HTMLElement | null)}
-    >
-      <ScheduleIcon className="h-2.5 w-2.5" />
-      {durationLabel}
-      {autoSchedule && (
-        <AutoScheduleMark className="-mr-0.5 h-2.5 w-2.5 opacity-80" />
-      )}
-    </Badge>
-  );
-}

package/src/components/ui/tu-do/boards/boardId/task-dialogs/BoardEstimationConfigDialog.tsx

@@ -1,499 +0,0 @@
-'use client';
-
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import {
-  BarChart3,
-  Calculator,
-  CheckSquare,
-  Loader2,
-  Target,
-} from '@tuturuuu/icons';
-import { updateWorkspaceTaskBoardEstimation } from '@tuturuuu/internal-api';
-import { Button } from '@tuturuuu/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@tuturuuu/ui/dialog';
-import { Label } from '@tuturuuu/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@tuturuuu/ui/select';
-import { toast } from '@tuturuuu/ui/sonner';
-import { Switch } from '@tuturuuu/ui/switch';
-import React from 'react';
-import { syncBoardEstimationCaches } from '../../../shared/board-query-cache';
-
-interface BoardEstimationConfigDialogProps {
-  open: boolean;
-  wsId: string;
-  boardId: string;
-  boardName: string;
-  currentEstimationType: string | null;
-  currentExtendedEstimation: boolean;
-  currentAllowZeroEstimates: boolean;
-  currentCountUnestimatedIssues: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSuccess: () => void;
-}
-
-const estimationTypes = [
-  {
-    value: 'none' as const,
-    actualValue: null,
-    label: 'No Estimation',
-    description: 'No estimation method configured',
-    color: 'bg-muted/50 text-muted-foreground',
-  },
-  {
-    value: 'fibonacci' as const,
-    actualValue: 'fibonacci' as const,
-    label: 'Fibonacci',
-    description: '0, 1, 2, 3, 5, 8',
-    color: 'bg-dynamic-blue/10 text-dynamic-blue',
-  },
-  {
-    value: 'linear' as const,
-    actualValue: 'linear' as const,
-    label: 'Linear',
-    description: '0, 1, 2, 3, 4, 5',
-    color: 'bg-dynamic-green/10 text-dynamic-green',
-  },
-  {
-    value: 'exponential' as const,
-    actualValue: 'exponential' as const,
-    label: 'Exponential',
-    description: '0, 1, 2, 4, 8, 16',
-    color: 'bg-dynamic-purple/10 text-dynamic-purple',
-  },
-  {
-    value: 't-shirt' as const,
-    actualValue: 't-shirt' as const,
-    label: 'T-Shirt Sizes',
-    description: '-, XS, S, M, L, XL',
-    color: 'bg-dynamic-orange/10 text-dynamic-orange',
-  },
-];
-
-export function BoardEstimationConfigDialog({
-  open,
-  wsId,
-  boardId,
-  boardName,
-  currentEstimationType,
-  currentExtendedEstimation,
-  currentAllowZeroEstimates,
-  currentCountUnestimatedIssues,
-  onOpenChange,
-  onSuccess,
-}: BoardEstimationConfigDialogProps) {
-  const queryClient = useQueryClient();
-  const [selectedEstimationType, setSelectedEstimationType] =
-    React.useState<string>('none');
-  const [extendedEstimation, setExtendedEstimation] =
-    React.useState<boolean>(false);
-  const [allowZeroEstimates, setAllowZeroEstimates] =
-    React.useState<boolean>(true);
-  const [countUnestimatedIssues, setCountUnestimatedIssues] =
-    React.useState<boolean>(false);
-
-  const updateEstimationMutation = useMutation({
-    mutationFn: ({
-      workspaceId,
-      targetBoardId,
-      payload,
-    }: {
-      workspaceId: string;
-      targetBoardId: string;
-      payload: Parameters<typeof updateWorkspaceTaskBoardEstimation>[2];
-    }) =>
-      updateWorkspaceTaskBoardEstimation(workspaceId, targetBoardId, payload),
-  });
-  const isSubmitting = updateEstimationMutation.isPending;
-
-  // Initialize state when dialog opens
-  React.useEffect(() => {
-    if (open) {
-      const selectValue =
-        currentEstimationType === null ? 'none' : currentEstimationType;
-      setSelectedEstimationType(selectValue || 'none');
-      setExtendedEstimation(currentExtendedEstimation || false);
-      setAllowZeroEstimates(currentAllowZeroEstimates ?? true);
-      setCountUnestimatedIssues(currentCountUnestimatedIssues || false);
-    }
-  }, [
-    open,
-    currentEstimationType,
-    currentExtendedEstimation,
-    currentAllowZeroEstimates,
-    currentCountUnestimatedIssues,
-  ]);
-
-  const getRangeInfo = (type: string) => {
-    switch (type) {
-      case 'fibonacci':
-        return {
-          label: 'Fibonacci Sequence Range',
-          standard: {
-            label: 'Standard Range',
-            description: '0, 1, 2, 3, 5, 8',
-          },
-          extended: {
-            label: 'Extended Range',
-            description: '0, 1, 2, 3, 5, 8, 13, 21',
-          },
-        };
-      case 'linear':
-        return {
-          label: 'Linear Scale Range',
-          standard: {
-            label: 'Standard Range',
-            description: '0, 1, 2, 3, 4, 5',
-          },
-          extended: {
-            label: 'Extended Range',
-            description: '0, 1, 2, 3, 4, 5, 6, 7',
-          },
-        };
-      case 'exponential':
-        return {
-          label: 'Exponential Scale Range',
-          standard: {
-            label: 'Standard Range',
-            description: '0, 1, 2, 4, 8, 16',
-          },
-          extended: {
-            label: 'Extended Range',
-            description: '0, 1, 2, 4, 8, 16, 32, 64',
-          },
-        };
-      case 't-shirt':
-        return {
-          label: 'T-Shirt Size Range',
-          standard: {
-            label: 'Standard Range',
-            description: '-, XS, S, M, L, XL',
-          },
-          extended: {
-            label: 'Extended Range',
-            description: '-, XS, S, M, L, XL, XXL, XXXL',
-          },
-        };
-      default:
-        return null;
-    }
-  };
-
-  const getEstimationDescription = (type: string, isExtended: boolean) => {
-    switch (type) {
-      case 'fibonacci':
-        return isExtended
-          ? 'Fibonacci sequence (0, 1, 2, 3, 5, 8, 13, 21)'
-          : 'Fibonacci sequence (0, 1, 2, 3, 5, 8)';
-      case 'linear':
-        return isExtended
-          ? 'Linear scale (0, 1, 2, 3, 4, 5, 6, 7)'
-          : 'Linear scale (0, 1, 2, 3, 4, 5)';
-      case 'exponential':
-        return isExtended
-          ? 'Powers of 2 (0, 1, 2, 4, 8, 16, 32, 64)'
-          : 'Powers of 2 (0, 1, 2, 4, 8, 16)';
-      case 't-shirt':
-        return isExtended
-          ? 'T-shirt sizes (-, XS, S, M, L, XL, XXL, XXXL)'
-          : 'T-shirt sizes (-, XS, S, M, L, XL)';
-      default:
-        return 'No estimation configured';
-    }
-  };
-
-  const handleConfirm = async () => {
-    const actualEstimationType =
-      selectedEstimationType === 'none'
-        ? null
-        : (selectedEstimationType as
-            | 'exponential'
-            | 'fibonacci'
-            | 'linear'
-            | 't-shirt');
-
-    try {
-      const updatedBoard = await updateEstimationMutation.mutateAsync({
-        workspaceId: wsId,
-        targetBoardId: boardId,
-        payload: {
-          estimation_type: actualEstimationType,
-          extended_estimation: extendedEstimation,
-          allow_zero_estimates: allowZeroEstimates,
-          count_unestimated_issues: countUnestimatedIssues,
-        },
-      });
-
-      syncBoardEstimationCaches({
-        queryClient,
-        workspaceId: wsId,
-        boardId,
-        boardName,
-        board: updatedBoard,
-      });
-
-      await Promise.all([
-        queryClient.invalidateQueries({
-          queryKey: ['board-config', wsId, boardId],
-        }),
-        queryClient.invalidateQueries({
-          queryKey: ['board-estimation-config', wsId, boardId],
-        }),
-        queryClient.invalidateQueries({
-          queryKey: ['task-board', wsId, boardId],
-        }),
-        queryClient.invalidateQueries({
-          queryKey: ['task-estimate-boards', wsId],
-        }),
-      ]);
-
-      toast.success('Estimation configured successfully');
-      onOpenChange(false);
-      onSuccess();
-    } catch (error) {
-      console.error('Error updating estimation:', error);
-      toast.error(
-        error instanceof Error
-          ? error.message
-          : 'Failed to update estimation settings'
-      );
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[540px]">
-        <DialogHeader className="border-b pb-4">
-          <DialogTitle className="flex items-center gap-2.5 text-lg">
-            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-dynamic-orange/10 ring-1 ring-dynamic-orange/20">
-              <Target className="h-4 w-4 text-dynamic-orange" />
-            </div>
-            <span>Configure Estimation for &quot;{boardName}&quot;</span>
-          </DialogTitle>
-        </DialogHeader>
-        <div className="space-y-5">
-          <div className="space-y-2.5 rounded-lg border border-border/60 bg-linear-to-br from-muted/30 to-muted/10 p-3.5 shadow-sm">
-            <Label
-              htmlFor="estimation-method"
-              className="flex items-center gap-2 font-semibold text-foreground text-sm"
-            >
-              <div className="flex h-5 w-5 items-center justify-center rounded-md bg-dynamic-orange/15">
-                <Calculator className="h-3.5 w-3.5 text-dynamic-orange" />
-              </div>
-              Estimation Method
-            </Label>
-            <Select
-              value={selectedEstimationType}
-              onValueChange={setSelectedEstimationType}
-            >
-              <SelectTrigger
-                id="estimation-method"
-                className="flex h-full w-full items-center justify-between text-left text-sm transition-all hover:border-dynamic-orange/50 hover:bg-dynamic-orange/5 [&>svg]:rotate-180 data-[state=open]:[&>svg]:rotate-0"
-              >
-                <SelectValue placeholder="Select estimation method" />
-              </SelectTrigger>
-              <SelectContent
-                align="end"
-                className="w-[var(--radix-select-trigger-width)]"
-              >
-                {estimationTypes.map((type) => (
-                  <SelectItem
-                    key={type.value}
-                    value={type.value}
-                    className="cursor-pointer"
-                  >
-                    <div className="py-2">
-                      <div className="font-medium">{type.label}</div>
-                      <div className="mt-1 text-muted-foreground text-sm">
-                        {type.description}
-                      </div>
-                    </div>
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          {selectedEstimationType && selectedEstimationType !== 'none' && (
-            <div className="space-y-2.5 rounded-lg border border-border/60 bg-linear-to-br from-muted/30 to-muted/10 p-3.5 shadow-sm">
-              <Label className="flex items-center gap-2 font-semibold text-foreground text-sm">
-                <div className="flex h-5 w-5 items-center justify-center rounded-md bg-dynamic-orange/15">
-                  <BarChart3 className="h-3.5 w-3.5 text-dynamic-orange" />
-                </div>
-                {getRangeInfo(selectedEstimationType)?.label ||
-                  'Estimation Range'}
-              </Label>
-              <div className="grid gap-3">
-                <button
-                  type="button"
-                  className={`flex items-center justify-between rounded-lg border-2 p-4 text-left transition-colors ${
-                    !extendedEstimation
-                      ? 'border-primary bg-primary/5'
-                      : 'border-border hover:border-primary/50'
-                  }`}
-                  onClick={() => setExtendedEstimation(false)}
-                >
-                  <div className="space-y-1">
-                    <div className="font-medium">
-                      {getRangeInfo(selectedEstimationType)?.standard.label ||
-                        'Standard Range'}
-                    </div>
-                    <div className="text-muted-foreground text-sm">
-                      {getRangeInfo(selectedEstimationType)?.standard
-                        .description || 'Standard values'}
-                    </div>
-                  </div>
-                  <div
-                    className={`h-4 w-4 rounded-full border-2 ${
-                      !extendedEstimation
-                        ? 'border-primary bg-primary'
-                        : 'border-border'
-                    }`}
-                  >
-                    {!extendedEstimation && (
-                      <div className="h-full w-full scale-50 rounded-full bg-white" />
-                    )}
-                  </div>
-                </button>
-
-                <button
-                  type="button"
-                  className={`flex items-center justify-between rounded-lg border-2 p-4 text-left transition-colors ${
-                    extendedEstimation
-                      ? 'border-primary bg-primary/5'
-                      : 'border-border hover:border-primary/50'
-                  }`}
-                  onClick={() => setExtendedEstimation(true)}
-                >
-                  <div className="space-y-1">
-                    <div className="font-medium">
-                      {getRangeInfo(selectedEstimationType)?.extended.label ||
-                        'Extended Range'}
-                    </div>
-                    <div className="text-muted-foreground text-sm">
-                      {getRangeInfo(selectedEstimationType)?.extended
-                        .description || 'Extended values'}
-                    </div>
-                  </div>
-                  <div
-                    className={`h-4 w-4 rounded-full border-2 ${
-                      extendedEstimation
-                        ? 'border-primary bg-primary'
-                        : 'border-border'
-                    }`}
-                  >
-                    {extendedEstimation && (
-                      <div className="h-full w-full scale-50 rounded-full bg-white" />
-                    )}
-                  </div>
-                </button>
-              </div>
-            </div>
-          )}
-
-          {/* Estimation Configuration Options */}
-          {selectedEstimationType && selectedEstimationType !== 'none' && (
-            <div className="space-y-2.5 rounded-lg border border-border/60 bg-linear-to-br from-muted/30 to-muted/10 p-3.5 shadow-sm">
-              <Label className="flex items-center gap-2 font-semibold text-foreground text-sm">
-                <div className="flex h-5 w-5 items-center justify-center rounded-md bg-dynamic-orange/15">
-                  <CheckSquare className="h-3.5 w-3.5 text-dynamic-orange" />
-                </div>
-                Estimation Options
-              </Label>
-
-              {/* Allow Zero Estimates Toggle */}
-              <div className="flex items-center justify-between gap-3 rounded-lg border border-border/60 bg-background p-3.5 transition-all hover:border-primary/30">
-                <div className="min-w-0 flex-1 space-y-0.5">
-                  <div className="font-medium text-sm">
-                    Allow zero estimates
-                  </div>
-                  <div className="text-muted-foreground text-xs leading-snug">
-                    When enabled, issues can be estimated with zero points
-                  </div>
-                </div>
-                <Switch
-                  checked={allowZeroEstimates}
-                  onCheckedChange={setAllowZeroEstimates}
-                  className="shrink-0"
-                />
-              </div>
-
-              {/* Count Unestimated Issues Toggle */}
-              <div className="flex items-center justify-between gap-3 rounded-lg border border-border/60 bg-background p-3.5 transition-all hover:border-primary/30">
-                <div className="min-w-0 flex-1 space-y-0.5">
-                  <div className="font-medium text-sm">
-                    Count unestimated issues
-                  </div>
-                  <div className="text-muted-foreground text-xs leading-snug">
-                    When enabled, unestimated issues count as 1 estimate point.
-                    When disabled, they count as 0
-                  </div>
-                </div>
-                <Switch
-                  checked={countUnestimatedIssues}
-                  onCheckedChange={setCountUnestimatedIssues}
-                  className="shrink-0"
-                />
-              </div>
-            </div>
-          )}
-
-          {selectedEstimationType && selectedEstimationType !== 'none' && (
-            <div className="rounded-lg border border-dynamic-orange/30 bg-dynamic-orange/5 p-3.5 ring-1 ring-dynamic-orange/10">
-              <div className="flex items-start gap-2.5">
-                <div className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-dynamic-orange">
-                  <div className="h-2 w-2 rounded-full bg-white" />
-                </div>
-                <div className="min-w-0 flex-1 space-y-0.5">
-                  <p className="font-semibold text-dynamic-orange text-sm">
-                    Selected Configuration
-                  </p>
-                  <p className="text-muted-foreground text-xs leading-snug">
-                    {getEstimationDescription(
-                      selectedEstimationType,
-                      extendedEstimation
-                    )}
-                  </p>
-                </div>
-              </div>
-            </div>
-          )}
-
-          <div className="flex flex-col-reverse gap-2 border-t pt-4 sm:flex-row sm:justify-end">
-            <Button
-              variant="outline"
-              onClick={() => onOpenChange(false)}
-              disabled={isSubmitting}
-              className="sm:w-auto"
-            >
-              Cancel
-            </Button>
-            <Button onClick={handleConfirm} disabled={isSubmitting}>
-              {isSubmitting ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Updating...
-                </>
-              ) : (
-                <>
-                  <CheckSquare className="mr-2 h-4 w-4" />
-                  Update Estimation
-                </>
-              )}
-            </Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}