@tuturuuu/ui 0.8.0 → 0.9.0

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

@@ -0,0 +1,251 @@
+'use client';
+
+import { Loader2, Plus, Save, Share2 } from '@tuturuuu/icons';
+import type {
+  TaskPlan,
+  TaskPlanPeriod,
+  TaskPlanStatus,
+} from '@tuturuuu/internal-api';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { Combobox } from '@tuturuuu/ui/custom/combobox';
+import { Input } from '@tuturuuu/ui/input';
+import { useTranslations } from 'next-intl';
+import {
+  getPlanWindowLabel,
+  TASK_PLAN_PERIODS,
+  TASK_PLAN_STATUSES,
+} from './planner-utils';
+
+interface PlannerPlanToolbarProps {
+  createPending: boolean;
+  mode: TaskPlanPeriod;
+  onCreatePlan: () => void;
+  onModeChange: (mode: TaskPlanPeriod) => void;
+  onPlanTitleChange: (title: string) => void;
+  onSelectedPlanChange: (planId: string) => void;
+  onSharePlan?: () => void;
+  planTitle: string;
+  plans: TaskPlan[];
+  plansLoading: boolean;
+  selectedPlan: TaskPlan | null;
+}
+
+type PlannerPlanBrowserProps = Pick<
+  PlannerPlanToolbarProps,
+  | 'onSelectedPlanChange'
+  | 'onSharePlan'
+  | 'plans'
+  | 'plansLoading'
+  | 'selectedPlan'
+>;
+
+function PlannerPlanBrowser({
+  onSelectedPlanChange,
+  onSharePlan,
+  plans,
+  plansLoading,
+  selectedPlan,
+}: PlannerPlanBrowserProps) {
+  const t = useTranslations('ws-task-plans');
+  const planOptions = plans.map((plan) => ({
+    value: plan.id,
+    label: plan.title,
+    description: getPlanWindowLabel(plan),
+  }));
+
+  return (
+    <div className="grid gap-2 md:grid-cols-[minmax(0,1fr)_auto] md:items-start">
+      <Combobox
+        mode="single"
+        options={planOptions}
+        selected={selectedPlan?.id ?? ''}
+        onChange={(value) => onSelectedPlanChange(value as string)}
+        placeholder={t('plan_switcher_placeholder')}
+        searchPlaceholder={t('plan_switcher_placeholder')}
+        emptyText={t('no_plans')}
+        disabled={plansLoading || plans.length === 0}
+        className="[&_button]:h-9"
+      />
+
+      {onSharePlan && selectedPlan && (
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={onSharePlan}
+          className="h-9 gap-2"
+        >
+          <Share2 className="h-4 w-4" />
+          {t('share_plan')}
+        </Button>
+      )}
+
+      {selectedPlan ? (
+        <div className="flex flex-wrap items-center gap-2 md:col-span-2">
+          <Badge variant="outline">{getPlanWindowLabel(selectedPlan)}</Badge>
+          <Badge variant="secondary">
+            {t(`mode_${selectedPlan.period_type}`)}
+          </Badge>
+          <Badge variant="secondary">
+            {t(`plan_status_${selectedPlan.status}`)}
+          </Badge>
+          <Badge variant="outline">
+            {selectedPlan.items?.length ?? 0} {t('planned_tasks')}
+          </Badge>
+          <Badge variant="outline">
+            {selectedPlan.shares?.length ?? 0} {t('share_plan')}
+          </Badge>
+        </div>
+      ) : (
+        <div className="rounded-md border border-dashed p-3 text-muted-foreground text-sm md:col-span-2">
+          {plansLoading ? t('loading') : t('no_plans')}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface PlannerCreatePlanPanelProps {
+  createPending: boolean;
+  mode: TaskPlanPeriod;
+  onCreatePlan: () => void;
+  onModeChange: (mode: TaskPlanPeriod) => void;
+  onPlanTitleChange: (title: string) => void;
+  planTitle: string;
+}
+
+export function PlannerCreatePlanPanel({
+  createPending,
+  mode,
+  onCreatePlan,
+  onModeChange,
+  onPlanTitleChange,
+  planTitle,
+}: PlannerCreatePlanPanelProps) {
+  const t = useTranslations('ws-task-plans');
+  const periodOptions = TASK_PLAN_PERIODS.map((period) => ({
+    value: period,
+    label: t(`mode_${period}`),
+  }));
+
+  return (
+    <div className="grid min-w-0 gap-2 md:grid-cols-[9rem_minmax(0,1fr)_auto]">
+      <Combobox
+        mode="single"
+        options={periodOptions}
+        selected={mode}
+        onChange={(value) => onModeChange(value as TaskPlanPeriod)}
+        placeholder={t('mode_week')}
+        searchPlaceholder={t('planner')}
+        className="[&_button]:h-9"
+      />
+      <Input
+        value={planTitle}
+        onChange={(event) => onPlanTitleChange(event.target.value)}
+        placeholder={t('plan_title_placeholder')}
+        className="h-9 min-w-0"
+      />
+      <Button
+        type="button"
+        onClick={onCreatePlan}
+        disabled={createPending}
+        size="sm"
+        className="h-9 gap-2"
+      >
+        {createPending ? (
+          <Loader2 className="h-4 w-4 animate-spin" />
+        ) : (
+          <Plus className="h-4 w-4" />
+        )}
+        {t('create_plan')}
+      </Button>
+    </div>
+  );
+}
+
+interface PlannerEditPlanPanelProps {
+  editMode: TaskPlanPeriod;
+  editStatus: TaskPlanStatus;
+  editTitle: string;
+  onEditModeChange: (mode: TaskPlanPeriod) => void;
+  onEditStatusChange: (status: TaskPlanStatus) => void;
+  onEditTitleChange: (title: string) => void;
+  onSavePlan: () => void;
+  savePending: boolean;
+}
+
+export function PlannerEditPlanPanel({
+  editMode,
+  editStatus,
+  editTitle,
+  onEditModeChange,
+  onEditStatusChange,
+  onEditTitleChange,
+  onSavePlan,
+  savePending,
+}: PlannerEditPlanPanelProps) {
+  const t = useTranslations('ws-task-plans');
+  const periodOptions = TASK_PLAN_PERIODS.map((period) => ({
+    value: period,
+    label: t(`mode_${period}`),
+  }));
+  const statusOptions = TASK_PLAN_STATUSES.map((status) => ({
+    value: status,
+    label: t(`plan_status_${status}`),
+  }));
+
+  return (
+    <div className="grid min-w-0 gap-2 md:grid-cols-[minmax(0,1fr)_9rem_9rem_auto]">
+      <Input
+        value={editTitle}
+        onChange={(event) => onEditTitleChange(event.target.value)}
+        placeholder={t('plan_title_placeholder')}
+        className="h-9 min-w-0"
+      />
+      <Combobox
+        mode="single"
+        options={periodOptions}
+        selected={editMode}
+        onChange={(value) => onEditModeChange(value as TaskPlanPeriod)}
+        placeholder={t('mode_week')}
+        searchPlaceholder={t('planner')}
+        className="[&_button]:h-9"
+      />
+      <Combobox
+        mode="single"
+        options={statusOptions}
+        selected={editStatus}
+        onChange={(value) => onEditStatusChange(value as TaskPlanStatus)}
+        placeholder={t('plan_status_draft')}
+        searchPlaceholder={t('planner')}
+        className="[&_button]:h-9"
+      />
+      <Button
+        type="button"
+        onClick={onSavePlan}
+        disabled={savePending}
+        size="sm"
+        className="h-9 gap-2"
+      >
+        {savePending ? (
+          <Loader2 className="h-4 w-4 animate-spin" />
+        ) : (
+          <Save className="h-4 w-4" />
+        )}
+        {t('save_plan')}
+      </Button>
+    </div>
+  );
+}
+
+export function PlannerPlanToolbar(props: PlannerPlanToolbarProps) {
+  return (
+    <div className="grid gap-3">
+      <PlannerPlanBrowser {...props} />
+      <PlannerCreatePlanPanel {...props} />
+    </div>
+  );
+}
+
+export { PlannerPlanBrowser };

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

@@ -0,0 +1,27 @@
+import type { TaskPlanItem } from '@tuturuuu/internal-api';
+import { Badge } from '@tuturuuu/ui/badge';
+import { useTranslations } from 'next-intl';
+import { getTaskPlanItemScope } from './planner-utils';
+
+interface PlannerScopeBadgeProps {
+  item: TaskPlanItem;
+  personalWorkspaceId: string;
+}
+
+export function PlannerScopeBadge({
+  item,
+  personalWorkspaceId,
+}: PlannerScopeBadgeProps) {
+  const t = useTranslations('ws-task-plans');
+  const scope = getTaskPlanItemScope(item, personalWorkspaceId);
+
+  if (scope === 'draft') {
+    return <Badge variant="secondary">{t('scope_draft')}</Badge>;
+  }
+
+  if (scope === 'personal') {
+    return <Badge variant="outline">{t('scope_personal')}</Badge>;
+  }
+
+  return <Badge>{t('scope_external_workspace')}</Badge>;
+}

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

@@ -0,0 +1,58 @@
+'use client';
+
+import { ChevronDown } from '@tuturuuu/icons';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@tuturuuu/ui/collapsible';
+import { cn } from '@tuturuuu/utils/format';
+import { type ReactNode, useState } from 'react';
+
+interface PlannerSectionProps {
+  badge?: ReactNode;
+  children: ReactNode;
+  defaultOpen?: boolean;
+  disabled?: boolean;
+  title: string;
+}
+
+export function PlannerSection({
+  badge,
+  children,
+  defaultOpen = false,
+  disabled,
+  title,
+}: PlannerSectionProps) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <Collapsible
+      open={open}
+      onOpenChange={setOpen}
+      className="rounded-md border bg-background"
+    >
+      <CollapsibleTrigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          className="flex min-h-11 w-full items-center justify-between gap-3 px-3 text-left transition-colors hover:bg-muted/40 disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          <span className="flex min-w-0 items-center gap-2">
+            <span className="truncate font-medium text-sm">{title}</span>
+            {badge}
+          </span>
+          <ChevronDown
+            className={cn(
+              'h-4 w-4 shrink-0 text-muted-foreground transition-transform',
+              open && 'rotate-180'
+            )}
+          />
+        </button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="border-t p-3">
+        {children}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

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

@@ -0,0 +1,238 @@
+'use client';
+
+import { useMutation } from '@tanstack/react-query';
+import { Loader2, Share2 } from '@tuturuuu/icons';
+import {
+  createWorkspaceTaskPlanShare,
+  isTaskPlanSchemaUnavailable,
+  type TaskPlan,
+  type TaskPlanPermission,
+} from '@tuturuuu/internal-api';
+import { Button } from '@tuturuuu/ui/button';
+import { Combobox } from '@tuturuuu/ui/custom/combobox';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@tuturuuu/ui/dialog';
+import { Input } from '@tuturuuu/ui/input';
+import { toast } from '@tuturuuu/ui/sonner';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+interface PlannerShareDialogProps {
+  onOpenChange: (open: boolean) => void;
+  onShared: () => void;
+  open: boolean;
+  plan: TaskPlan;
+  targetWorkspaceId: string | null;
+  targetWorkspaceName: string | null;
+  workspaceId: string;
+}
+
+export function PlannerShareDialog({
+  onOpenChange,
+  onShared,
+  open,
+  plan,
+  targetWorkspaceId,
+  targetWorkspaceName,
+  workspaceId,
+}: PlannerShareDialogProps) {
+  const t = useTranslations('ws-task-plans');
+  const tCommon = useTranslations('common');
+  const [email, setEmail] = useState('');
+  const [permission, setPermission] = useState<TaskPlanPermission>('view');
+  const permissionOptions = [
+    { value: 'view', label: t('permission_view') },
+    { value: 'edit', label: t('permission_edit') },
+  ];
+
+  const shareMutation = useMutation({
+    mutationFn: (recipient: 'email' | 'workspace') => {
+      if (recipient === 'workspace' && targetWorkspaceId) {
+        return createWorkspaceTaskPlanShare(workspaceId, plan.id, {
+          shared_with_ws_id: targetWorkspaceId,
+          permission,
+        });
+      }
+
+      return createWorkspaceTaskPlanShare(workspaceId, plan.id, {
+        shared_with_email: email.trim(),
+        permission,
+      });
+    },
+    onSuccess: (response) => {
+      if (isTaskPlanSchemaUnavailable(response)) {
+        toast.error(t('schema_unavailable'));
+        return;
+      }
+
+      setEmail('');
+      onShared();
+      toast.success(t('share_saved'));
+    },
+    onError: () => toast.error(tCommon('error')),
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{t('share_plan')}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-3">
+          <div className="grid grid-cols-[1fr_8rem] gap-2">
+            <Input
+              value={email}
+              onChange={(event) => setEmail(event.target.value)}
+              placeholder={t('share_email_placeholder')}
+              type="email"
+            />
+            <Combobox
+              mode="single"
+              options={permissionOptions}
+              selected={permission}
+              onChange={(value) => setPermission(value as TaskPlanPermission)}
+              placeholder={t('permission_view')}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2 sm:flex-row">
+            <Button
+              type="button"
+              onClick={() => shareMutation.mutate('email')}
+              disabled={!email.trim() || shareMutation.isPending}
+              className="gap-2"
+            >
+              {shareMutation.isPending ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Share2 className="h-4 w-4" />
+              )}
+              {t('share_email')}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => shareMutation.mutate('workspace')}
+              disabled={!targetWorkspaceId || shareMutation.isPending}
+            >
+              {targetWorkspaceName
+                ? t('share_workspace_name', { name: targetWorkspaceName })
+                : t('share_workspace')}
+            </Button>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            {tCommon('close')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface PlannerSharePanelProps {
+  onShared: () => void;
+  plan: TaskPlan;
+  targetWorkspaceId: string | null;
+  targetWorkspaceName: string | null;
+  workspaceId: string;
+}
+
+export function PlannerSharePanel({
+  onShared,
+  plan,
+  targetWorkspaceId,
+  targetWorkspaceName,
+  workspaceId,
+}: PlannerSharePanelProps) {
+  const t = useTranslations('ws-task-plans');
+  const tCommon = useTranslations('common');
+  const [email, setEmail] = useState('');
+  const [permission, setPermission] = useState<TaskPlanPermission>('view');
+  const permissionOptions = [
+    { value: 'view', label: t('permission_view') },
+    { value: 'edit', label: t('permission_edit') },
+  ];
+
+  const shareMutation = useMutation({
+    mutationFn: (recipient: 'email' | 'workspace') => {
+      if (recipient === 'workspace' && targetWorkspaceId) {
+        return createWorkspaceTaskPlanShare(workspaceId, plan.id, {
+          shared_with_ws_id: targetWorkspaceId,
+          permission,
+        });
+      }
+
+      return createWorkspaceTaskPlanShare(workspaceId, plan.id, {
+        shared_with_email: email.trim(),
+        permission,
+      });
+    },
+    onSuccess: (response) => {
+      if (isTaskPlanSchemaUnavailable(response)) {
+        toast.error(t('schema_unavailable'));
+        return;
+      }
+
+      setEmail('');
+      onShared();
+      toast.success(t('share_saved'));
+    },
+    onError: () => toast.error(tCommon('error')),
+  });
+
+  return (
+    <div className="space-y-2">
+      <div className="grid gap-2 sm:grid-cols-[1fr_8rem_auto]">
+        <Input
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+          placeholder={t('share_email_placeholder')}
+          type="email"
+          className="h-9"
+        />
+        <Combobox
+          mode="single"
+          options={permissionOptions}
+          selected={permission}
+          onChange={(value) => setPermission(value as TaskPlanPermission)}
+          placeholder={t('permission_view')}
+          className="[&_button]:h-9"
+        />
+        <Button
+          type="button"
+          onClick={() => shareMutation.mutate('email')}
+          disabled={!email.trim() || shareMutation.isPending}
+          className="h-9 gap-2"
+        >
+          {shareMutation.isPending ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Share2 className="h-4 w-4" />
+          )}
+          {t('share_email')}
+        </Button>
+      </div>
+
+      <Button
+        type="button"
+        variant="outline"
+        onClick={() => shareMutation.mutate('workspace')}
+        disabled={!targetWorkspaceId || shareMutation.isPending}
+        className="h-9"
+      >
+        {targetWorkspaceName
+          ? t('share_workspace_name', { name: targetWorkspaceName })
+          : t('share_workspace')}
+      </Button>
+    </div>
+  );
+}