@tuturuuu/ui 0.8.0 → 0.9.0

package/src/components/ui/tu-do/boards/boardId/kanban/planner/__tests__/kanban-planner-island.test.tsx

@@ -0,0 +1,380 @@
+import '@testing-library/jest-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import * as React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { KanbanPlannerDialog } from '../kanban-planner-dialog';
+
+const mocks = vi.hoisted(() => ({
+  addWorkspaceTaskPlanWorkspace: vi.fn(),
+  createWorkspaceTaskPlan: vi.fn(),
+  createWorkspaceTaskPlanItem: vi.fn(),
+  createWorkspaceTaskPlanShare: vi.fn(),
+  getWorkspaceTaskPlanDigest: vi.fn(),
+  listWorkspaceBoardsWithLists: vi.fn(),
+  listWorkspaceTaskPlans: vi.fn(),
+  listWorkspaces: vi.fn(),
+  updateWorkspaceTaskPlan: vi.fn(),
+}));
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string, values?: Record<string, string>) =>
+    values?.name ? `${key} ${values.name}` : key,
+}));
+
+vi.mock('@tuturuuu/ui/sonner', () => ({
+  toast: { error: vi.fn(), success: vi.fn() },
+}));
+
+vi.mock('@tuturuuu/ui/collapsible', () => ({
+  Collapsible: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  CollapsibleContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  CollapsibleTrigger: ({ children }: { children: React.ReactNode }) =>
+    React.isValidElement(children)
+      ? React.cloneElement(
+          children as React.ReactElement<{ 'aria-expanded'?: string }>,
+          { 'aria-expanded': 'false' }
+        )
+      : children,
+}));
+
+vi.mock('@tuturuuu/ui/custom/combobox', () => ({
+  Combobox: ({
+    disabled,
+    mode = 'single',
+    onChange,
+    options,
+    placeholder,
+    selected,
+  }: {
+    disabled?: boolean;
+    mode?: 'single' | 'multiple';
+    onChange?: (value: string | string[]) => void;
+    options: { label: string; value: string }[];
+    placeholder?: string;
+    selected: string | string[];
+  }) => (
+    <select
+      aria-label={placeholder}
+      disabled={disabled}
+      multiple={mode === 'multiple'}
+      value={selected}
+      onChange={(event) => {
+        if (mode === 'multiple') {
+          onChange?.(
+            Array.from(event.currentTarget.selectedOptions).map(
+              (option) => option.value
+            )
+          );
+          return;
+        }
+
+        onChange?.(event.target.value);
+      }}
+    >
+      {options.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  ),
+}));
+
+vi.mock('@tuturuuu/ui/dialog', () => ({
+  Dialog: ({ children, open }: { children: React.ReactNode; open: boolean }) =>
+    open ? <div role="dialog">{children}</div> : null,
+  DialogContent: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+  DialogDescription: ({ children }: { children: React.ReactNode }) => (
+    <p>{children}</p>
+  ),
+  DialogFooter: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+  DialogHeader: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+  DialogTitle: ({ children }: { children: React.ReactNode }) => (
+    <h2>{children}</h2>
+  ),
+}));
+
+vi.mock('@tuturuuu/internal-api', async () => {
+  const actual = await vi.importActual<typeof import('@tuturuuu/internal-api')>(
+    '@tuturuuu/internal-api'
+  );
+  return {
+    ...actual,
+    addWorkspaceTaskPlanWorkspace: (...args: unknown[]) =>
+      mocks.addWorkspaceTaskPlanWorkspace(...args),
+    createWorkspaceTaskPlan: (...args: unknown[]) =>
+      mocks.createWorkspaceTaskPlan(...args),
+    createWorkspaceTaskPlanItem: (...args: unknown[]) =>
+      mocks.createWorkspaceTaskPlanItem(...args),
+    createWorkspaceTaskPlanShare: (...args: unknown[]) =>
+      mocks.createWorkspaceTaskPlanShare(...args),
+    getWorkspaceTaskPlanDigest: (...args: unknown[]) =>
+      mocks.getWorkspaceTaskPlanDigest(...args),
+    listWorkspaceTaskPlans: (...args: unknown[]) =>
+      mocks.listWorkspaceTaskPlans(...args),
+    listWorkspaceBoardsWithLists: (...args: unknown[]) =>
+      mocks.listWorkspaceBoardsWithLists(...args),
+    listWorkspaces: (...args: unknown[]) => mocks.listWorkspaces(...args),
+    updateWorkspaceTaskPlan: (...args: unknown[]) =>
+      mocks.updateWorkspaceTaskPlan(...args),
+  };
+});
+
+const basePlan = {
+  id: 'plan-1',
+  owner_id: 'user-1',
+  personal_ws_id: 'ws-personal',
+  title: 'Launch plan',
+  period_type: 'week' as const,
+  period_start: '2026-06-22',
+  period_end: '2026-06-28',
+  timezone: 'UTC',
+  status: 'draft' as const,
+  default_target_ws_id: 'team-ws',
+  default_target_board_id: 'board-1',
+  default_target_list_id: 'list-1',
+  created_at: '2026-06-22T00:00:00.000Z',
+  updated_at: '2026-06-22T00:00:00.000Z',
+  archived_at: null,
+  workspaces: [
+    { plan_id: 'plan-1', ws_id: 'ws-personal' },
+    { plan_id: 'plan-1', ws_id: 'team-ws' },
+  ],
+  shares: [
+    {
+      id: 'share-1',
+      plan_id: 'plan-1',
+      shared_with_ws_id: 'team-ws',
+      shared_with_user_id: null,
+      shared_with_email: null,
+      permission: 'view' as const,
+      shared_by_user_id: 'user-1',
+      created_at: '2026-06-22T00:00:00.000Z',
+      updated_at: '2026-06-22T00:00:00.000Z',
+    },
+  ],
+  items: [
+    {
+      id: 'item-1',
+      plan_id: 'plan-1',
+      task_id: 'task-1',
+      target_ws_id: 'team-ws',
+      target_board_id: 'board-1',
+      target_list_id: 'list-1',
+      planned_start: '2026-06-23',
+      planned_end: null,
+      sort_key: 1,
+      status: 'planned' as const,
+      notes: 'Local timing override',
+      snapshot_title: null,
+      created_by_user_id: 'user-1',
+      created_at: '2026-06-22T00:00:00.000Z',
+      updated_at: '2026-06-22T00:00:00.000Z',
+      task: { id: 'task-1', name: 'Team task' },
+    },
+  ],
+};
+
+function renderPlanner() {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <KanbanPlannerDialog
+        boardId="board-1"
+        isPersonalWorkspace
+        onOpenChange={vi.fn()}
+        open
+        workspaceId="ws-personal"
+      />
+    </QueryClientProvider>
+  );
+}
+
+describe('KanbanPlannerDialog', () => {
+  beforeEach(() => {
+    for (const mock of Object.values(mocks)) mock.mockReset();
+    mocks.listWorkspaces.mockResolvedValue([
+      { id: 'ws-personal', name: 'Personal', personal: true },
+      { id: 'team-ws', name: 'Team', personal: false },
+    ]);
+    mocks.listWorkspaceBoardsWithLists.mockResolvedValue({
+      boards: [
+        {
+          id: 'board-1',
+          name: 'Team board',
+          task_lists: [{ id: 'list-1', name: 'Todo' }],
+        },
+      ],
+    });
+  });
+
+  it('renders a compact disabled state when the plan schema is unavailable', async () => {
+    mocks.listWorkspaceTaskPlans.mockResolvedValue({
+      ok: false,
+      code: 'schema_unavailable',
+      schemaAvailable: false,
+      message: 'Migration pending',
+    });
+
+    renderPlanner();
+
+    expect(await screen.findByText('schema_unavailable')).toBeInTheDocument();
+  });
+
+  it('renders browse-first planner sections with create and edit separated', async () => {
+    mocks.listWorkspaceTaskPlans.mockResolvedValue({
+      ok: true,
+      schemaAvailable: true,
+      plans: [basePlan],
+    });
+
+    renderPlanner();
+
+    await waitFor(() => {
+      expect(mocks.listWorkspaceTaskPlans).toHaveBeenCalledWith('ws-personal');
+    });
+
+    for (const sectionName of [
+      'plan_browser',
+      'new_plan',
+      'edit_plan',
+      'target_workspace',
+      'planned_tasks',
+      'digest',
+      'share_plan',
+    ]) {
+      const sectionButton = screen
+        .getAllByRole('button', { name: new RegExp(sectionName) })
+        .find((button) => button.getAttribute('aria-expanded') === 'false');
+
+      expect(sectionButton).toBeDefined();
+    }
+
+    expect(await screen.findByText('Launch plan')).toBeInTheDocument();
+  });
+
+  it('switches planner mode and creates a monthly plan', async () => {
+    mocks.listWorkspaceTaskPlans.mockResolvedValue({
+      ok: true,
+      schemaAvailable: true,
+      plans: [],
+    });
+    mocks.createWorkspaceTaskPlan.mockResolvedValue({
+      ok: true,
+      schemaAvailable: true,
+      plan: basePlan,
+    });
+
+    renderPlanner();
+
+    await screen.findByLabelText('mode_week');
+
+    fireEvent.change(screen.getByLabelText('mode_week'), {
+      target: { value: 'month' },
+    });
+    fireEvent.change(screen.getByPlaceholderText('plan_title_placeholder'), {
+      target: { value: 'Monthly roadmap' },
+    });
+    fireEvent.click(screen.getAllByText('create_plan').at(-1)!);
+
+    await waitFor(() => {
+      expect(mocks.createWorkspaceTaskPlan).toHaveBeenCalledWith(
+        'ws-personal',
+        expect.objectContaining({
+          period_type: 'month',
+          title: 'Monthly roadmap',
+        })
+      );
+    });
+  });
+
+  it('shows source labels and shares a selected plan by email', async () => {
+    mocks.listWorkspaceTaskPlans.mockResolvedValue({
+      ok: true,
+      schemaAvailable: true,
+      plans: [basePlan],
+    });
+    mocks.createWorkspaceTaskPlanShare.mockResolvedValue({
+      ok: true,
+      schemaAvailable: true,
+      share: basePlan.shares[0],
+    });
+
+    renderPlanner();
+
+    expect(await screen.findByText('scope_team_source')).toBeInTheDocument();
+    expect(screen.getByText('scope_external_workspace')).toBeInTheDocument();
+    expect(screen.getByText('scope_my_override')).toBeInTheDocument();
+
+    fireEvent.change(screen.getByPlaceholderText('share_email_placeholder'), {
+      target: { value: 'lead@example.com' },
+    });
+    fireEvent.click(screen.getByText('share_email'));
+
+    await waitFor(() => {
+      expect(mocks.createWorkspaceTaskPlanShare).toHaveBeenCalledWith(
+        'ws-personal',
+        'plan-1',
+        { shared_with_email: 'lead@example.com', permission: 'view' }
+      );
+    });
+  });
+
+  it('edits a selected plan without using the create panel', async () => {
+    mocks.listWorkspaceTaskPlans.mockResolvedValue({
+      ok: true,
+      schemaAvailable: true,
+      plans: [basePlan],
+    });
+    mocks.updateWorkspaceTaskPlan.mockResolvedValue({
+      ok: true,
+      schemaAvailable: true,
+      plan: {
+        ...basePlan,
+        title: 'Updated launch plan',
+      },
+    });
+
+    renderPlanner();
+
+    await screen.findByDisplayValue('Launch plan');
+    const editTitle = screen
+      .getAllByPlaceholderText('plan_title_placeholder')
+      .find(
+        (element) => (element as HTMLInputElement).value === 'Launch plan'
+      )!;
+
+    fireEvent.change(editTitle, {
+      target: { value: 'Updated launch plan' },
+    });
+    fireEvent.change(screen.getAllByLabelText('mode_week').at(-1)!, {
+      target: { value: 'month' },
+    });
+    fireEvent.click(screen.getByText('save_plan'));
+
+    await waitFor(() => {
+      expect(mocks.updateWorkspaceTaskPlan).toHaveBeenCalledWith(
+        'ws-personal',
+        'plan-1',
+        expect.objectContaining({
+          period_type: 'month',
+          title: 'Updated launch plan',
+        })
+      );
+    });
+  });
+});

package/src/components/ui/tu-do/boards/boardId/kanban/planner/kanban-planner-dialog.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+import { CalendarDays } 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 { useTranslations } from 'next-intl';
+import { PlannerDigestPanel } from './planner-digest-panel';
+import { PlannerItemStrip } from './planner-item-strip';
+import {
+  PlannerCreatePlanPanel,
+  PlannerEditPlanPanel,
+  PlannerPlanBrowser,
+} from './planner-plan-toolbar';
+import { PlannerSection } from './planner-section';
+import { PlannerSharePanel } from './planner-share-dialog';
+import { PlannerTargetControls } from './planner-target-controls';
+import { useKanbanPlannerState } from './use-kanban-planner-state';
+
+interface KanbanPlannerDialogProps {
+  boardId: string | null;
+  isPersonalWorkspace: boolean;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+  workspaceId: string;
+}
+
+export function KanbanPlannerDialog({
+  boardId,
+  isPersonalWorkspace,
+  onOpenChange,
+  open,
+  workspaceId,
+}: KanbanPlannerDialogProps) {
+  const t = useTranslations('ws-task-plans');
+  const tCommon = useTranslations('common');
+  const planner = useKanbanPlannerState({
+    boardId,
+    enabled: open,
+    isPersonalWorkspace,
+    workspaceId,
+  });
+
+  if (!isPersonalWorkspace) return null;
+
+  const planCount = planner.plans.length;
+  const itemCount = planner.selectedPlan?.items?.length ?? 0;
+  const shareCount = planner.selectedPlan?.shares?.length ?? 0;
+  const hasSelectedPlan = Boolean(planner.selectedPlan);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[min(88dvh,720px)] overflow-y-auto sm:max-w-3xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <CalendarDays className="h-5 w-5" />
+            {t('planner')}
+          </DialogTitle>
+          <DialogDescription className="sr-only">
+            {t('planner')}
+          </DialogDescription>
+        </DialogHeader>
+
+        {planner.schemaUnavailable ? (
+          <div className="rounded-md border border-dashed p-3 text-muted-foreground text-sm">
+            {t('schema_unavailable')}
+          </div>
+        ) : (
+          <div className="space-y-2">
+            <PlannerSection
+              title={t('plan_browser')}
+              defaultOpen
+              badge={
+                <Badge variant="secondary">
+                  {planner.plansQuery.isLoading ? t('loading') : planCount}
+                </Badge>
+              }
+            >
+              <PlannerPlanBrowser
+                onSelectedPlanChange={planner.setSelectedPlanId}
+                plans={planner.plans}
+                plansLoading={planner.plansQuery.isLoading}
+                selectedPlan={planner.selectedPlan}
+              />
+            </PlannerSection>
+
+            <PlannerSection title={t('new_plan')}>
+              <PlannerCreatePlanPanel
+                createPending={planner.createPlanMutation.isPending}
+                mode={planner.mode}
+                onCreatePlan={() => planner.createPlanMutation.mutate()}
+                onModeChange={planner.setMode}
+                onPlanTitleChange={planner.setPlanTitle}
+                planTitle={planner.planTitle}
+              />
+            </PlannerSection>
+
+            <PlannerSection title={t('edit_plan')} disabled={!hasSelectedPlan}>
+              {planner.selectedPlan && (
+                <PlannerEditPlanPanel
+                  editMode={planner.editMode}
+                  editStatus={planner.editStatus}
+                  editTitle={planner.editTitle}
+                  onEditModeChange={planner.setEditMode}
+                  onEditStatusChange={planner.setEditStatus}
+                  onEditTitleChange={planner.setEditTitle}
+                  onSavePlan={() => planner.updatePlanMutation.mutate()}
+                  savePending={planner.updatePlanMutation.isPending}
+                />
+              )}
+            </PlannerSection>
+
+            <PlannerSection
+              title={t('target_workspace')}
+              disabled={!hasSelectedPlan}
+              badge={
+                hasSelectedPlan && planner.targetIsIntended ? (
+                  <Badge variant="secondary">{t('intended_workspace')}</Badge>
+                ) : null
+              }
+            >
+              {planner.selectedPlan && (
+                <PlannerTargetControls
+                  addWorkspacePending={planner.addWorkspaceMutation.isPending}
+                  boards={planner.boards}
+                  createItemPending={planner.createItemMutation.isPending}
+                  lists={planner.lists}
+                  onAddWorkspace={() => planner.addWorkspaceMutation.mutate()}
+                  onCreateItem={() => planner.createItemMutation.mutate()}
+                  onPlannedDateChange={planner.setPlannedDate}
+                  onTargetBoardChange={planner.setTargetBoardId}
+                  onTargetListChange={planner.setTargetListId}
+                  onTargetWorkspaceChange={planner.setTargetWorkspaceId}
+                  onTaskTitleChange={planner.setTaskTitle}
+                  plannedDate={planner.plannedDate}
+                  targetBoardId={planner.targetBoardId}
+                  targetIsIntended={planner.targetIsIntended}
+                  targetListId={planner.targetListId}
+                  targetWorkspaceId={planner.targetWorkspaceId}
+                  taskTitle={planner.taskTitle}
+                  workspaces={planner.workspaces}
+                />
+              )}
+            </PlannerSection>
+
+            <PlannerSection
+              title={t('planned_tasks')}
+              disabled={!hasSelectedPlan}
+              badge={<Badge variant="secondary">{itemCount}</Badge>}
+            >
+              {planner.selectedPlan && (
+                <PlannerItemStrip
+                  personalWorkspaceId={workspaceId}
+                  plan={planner.selectedPlan}
+                  plansLoading={planner.plansQuery.isLoading}
+                />
+              )}
+            </PlannerSection>
+
+            <PlannerSection title={t('digest')} disabled={!hasSelectedPlan}>
+              {planner.selectedPlan && (
+                <PlannerDigestPanel
+                  plan={planner.selectedPlan}
+                  workspaceId={workspaceId}
+                />
+              )}
+            </PlannerSection>
+
+            <PlannerSection
+              title={t('share_plan')}
+              disabled={!hasSelectedPlan}
+              badge={<Badge variant="secondary">{shareCount}</Badge>}
+            >
+              {planner.selectedPlan && (
+                <PlannerSharePanel
+                  onShared={planner.invalidatePlans}
+                  plan={planner.selectedPlan}
+                  workspaceId={workspaceId}
+                  targetWorkspaceId={
+                    planner.targetIsIntended ? planner.targetWorkspaceId : null
+                  }
+                  targetWorkspaceName={planner.targetWorkspace?.name ?? null}
+                />
+              )}
+            </PlannerSection>
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {tCommon('close')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/tu-do/boards/boardId/kanban/planner/planner-digest-panel.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { useMutation } from '@tanstack/react-query';
+import { ClipboardList, Loader2 } from '@tuturuuu/icons';
+import {
+  getWorkspaceTaskPlanDigest,
+  isTaskPlanSchemaUnavailable,
+  type TaskPlan,
+} from '@tuturuuu/internal-api';
+import { Button } from '@tuturuuu/ui/button';
+import { toast } from '@tuturuuu/ui/sonner';
+import { Textarea } from '@tuturuuu/ui/textarea';
+import { useTranslations } from 'next-intl';
+
+interface PlannerDigestPanelProps {
+  plan: TaskPlan;
+  workspaceId: string;
+}
+
+export function PlannerDigestPanel({
+  plan,
+  workspaceId,
+}: PlannerDigestPanelProps) {
+  const t = useTranslations('ws-task-plans');
+  const tCommon = useTranslations('common');
+
+  const digestMutation = useMutation({
+    mutationFn: () => getWorkspaceTaskPlanDigest(workspaceId, plan.id),
+    onError: () => toast.error(tCommon('error')),
+  });
+  const digest = digestMutation.data;
+
+  return (
+    <div className="min-w-0 space-y-2">
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={() => digestMutation.mutate()}
+        disabled={digestMutation.isPending}
+        className="h-8 gap-2"
+      >
+        {digestMutation.isPending ? (
+          <Loader2 className="h-4 w-4 animate-spin" />
+        ) : (
+          <ClipboardList className="h-4 w-4" />
+        )}
+        {t('generate_digest')}
+      </Button>
+
+      {digest && !isTaskPlanSchemaUnavailable(digest) && (
+        <Textarea
+          readOnly
+          value={digest.digest}
+          className="h-28 resize-none text-xs"
+          aria-label={t('digest')}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/ui/tu-do/boards/boardId/kanban/planner/planner-item-strip.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import type { TaskPlan } from '@tuturuuu/internal-api';
+import { Badge } from '@tuturuuu/ui/badge';
+import { useTranslations } from 'next-intl';
+import { PlannerScopeBadge } from './planner-scope-badge';
+
+interface PlannerItemStripProps {
+  personalWorkspaceId: string;
+  plan: TaskPlan;
+  plansLoading: boolean;
+}
+
+export function PlannerItemStrip({
+  personalWorkspaceId,
+  plan,
+  plansLoading,
+}: PlannerItemStripProps) {
+  const t = useTranslations('ws-task-plans');
+  const items = plan.items ?? [];
+
+  return (
+    <div className="flex min-h-20 gap-2 overflow-x-auto">
+      {items.length === 0 ? (
+        <div className="flex min-h-16 items-center rounded-md border border-dashed px-3 text-muted-foreground text-sm">
+          {plansLoading ? t('loading') : t('no_items')}
+        </div>
+      ) : (
+        items.map((item) => (
+          <div
+            key={item.id}
+            className="min-w-56 max-w-72 rounded-md border bg-card p-2 text-sm"
+          >
+            <div className="truncate font-medium">
+              {item.task?.name ?? item.snapshot_title ?? t('untitled_task')}
+            </div>
+            <div className="mt-2 flex flex-wrap gap-1">
+              {item.task_id ? (
+                <Badge variant="outline">{t('scope_team_source')}</Badge>
+              ) : null}
+              <PlannerScopeBadge
+                item={item}
+                personalWorkspaceId={personalWorkspaceId}
+              />
+              {item.notes ? (
+                <Badge variant="secondary">{t('scope_my_override')}</Badge>
+              ) : null}
+            </div>
+          </div>
+        ))
+      )}
+    </div>
+  );
+}