@tuturuuu/ui 0.7.0 → 0.9.0

package/src/components/ui/text-editor/tool-bar.tsx

@@ -13,7 +13,6 @@ import {
   Heading1,
   Heading2,
   Heading3,
-  Highlighter,
   ImageIcon,
   Italic,
   Link,
@@ -37,6 +36,7 @@ import { Toggle } from '@tuturuuu/ui/toggle';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
 import { cn } from '@tuturuuu/utils/format';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { TextEditorColorControls } from './color-controls';
 import {
   MAX_IMAGE_SIZE,
   MAX_VIDEO_SIZE,
@@ -65,7 +65,6 @@ const HOTKEYS = {
   'ordered-list': 'Mod+Shift+7',
   'task-list': 'Mod+Shift+9',
   table: '',
-  highlight: 'Mod+Shift+H',
   link: 'Mod+K',
   image: '',
   video: '',
@@ -90,7 +89,6 @@ const LABELS: Record<string, string> = {
   'ordered-list': 'Ordered List',
   'task-list': 'Task List',
   table: 'Insert Table',
-  highlight: 'Highlight',
   link: 'Link',
   image: 'Upload Image',
   video: 'Upload Video',
@@ -104,7 +102,7 @@ const TOOLBAR_GROUPS = [
   ['bold', 'italic', 'strike', 'subscript', 'superscript'],
   ['align-left', 'align-center', 'align-right'],
   ['bullet-list', 'ordered-list', 'task-list'],
-  ['table', 'highlight', 'link'],
+  ['table', 'link'],
 ] as const;
 
 /** Format a hotkey combo string for display (platform-aware). */
@@ -371,12 +369,6 @@ export function ToolBar({
               .run(),
           pressed: editor?.isActive('table'),
         },
-        {
-          key: 'highlight',
-          icon: <Highlighter className="size-4" />,
-          onClick: () => editor?.chain().focus().toggleHighlight().run(),
-          pressed: editor?.isActive('highlight'),
-        },
       ] as const,
     [editor]
   );
@@ -601,6 +593,10 @@ export function ToolBar({
           />
         ))}
 
+        {/* Color controls */}
+        <ToolbarSeparator />
+        <TextEditorColorControls editor={editor} />
+
         {/* Link */}
         <ToolbarSeparator />
         <ToolbarButton
@@ -1098,12 +1094,6 @@ export function FixedToolbar({
             .run(),
         pressed: editor.isActive('table'),
       },
-      {
-        key: 'highlight',
-        icon: <Highlighter className="size-4" />,
-        onClick: () => editor.chain().focus().toggleHighlight().run(),
-        pressed: editor.isActive('highlight'),
-      },
       {
         key: 'link',
         icon: <Link className="size-4" />,
@@ -1244,6 +1234,9 @@ export function FixedToolbar({
         </div>
       ))}
 
+      <ToolbarSeparator />
+      <TextEditorColorControls editor={editor} />
+
       {/* Media group */}
       {workspaceId && onImageUpload && (
         <>

package/src/components/ui/text-editor/video-extension.ts

@@ -29,6 +29,15 @@ const VIDEO_INPUT_REGEX = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/;
 
 interface VideoOptions {
   onVideoUpload?: (file: File) => Promise<string>;
+  getOnVideoUpload?: () => ((file: File) => Promise<string>) | undefined;
+}
+
+function resolveVideoUploadHandler(options: VideoOptions) {
+  if (options.getOnVideoUpload) {
+    return options.getOnVideoUpload();
+  }
+
+  return options.onVideoUpload;
 }
 
 /**
@@ -114,8 +123,6 @@ export const Video = (options: VideoOptions = {}) =>
     },
 
     addProseMirrorPlugins() {
-      const { onVideoUpload } = options;
-
       return [
         // Video upload placeholder plugin - manages loading state decorations
         new Plugin({
@@ -166,6 +173,7 @@ export const Video = (options: VideoOptions = {}) =>
           props: {
             handleDOMEvents: {
               paste: (view, event: ClipboardEvent) => {
+                const onVideoUpload = resolveVideoUploadHandler(options);
                 if (!onVideoUpload) return false;
 
                 const items = event.clipboardData?.items;
@@ -303,6 +311,7 @@ export const Video = (options: VideoOptions = {}) =>
           props: {
             handleDOMEvents: {
               drop(view, event) {
+                const onVideoUpload = resolveVideoUploadHandler(options);
                 if (!onVideoUpload) return false;
 
                 const { schema } = view.state;

package/src/components/ui/toast.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as ToastPrimitives from '@radix-ui/react-toast';
-import { X } from '@tuturuuu/icons';
+import { X } from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';

package/src/components/ui/tu-do/boards/__tests__/board-share-dialog.test.tsx

@@ -0,0 +1,270 @@
+import '@testing-library/jest-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { BoardShareDialog } from '../board-share-dialog';
+
+const createWorkspaceTaskBoardShareMock = vi.fn();
+const deleteWorkspaceTaskBoardShareMock = vi.fn();
+const disableWorkspaceTaskBoardPublicLinkMock = vi.fn();
+const enableWorkspaceTaskBoardPublicLinkMock = vi.fn();
+const getWorkspaceTaskBoardPublicLinkMock = vi.fn();
+const listWorkspaceTaskBoardSharesMock = vi.fn();
+const listWorkspaceTaskBoardViewableMembersMock = vi.fn();
+const updateWorkspaceTaskBoardShareMock = vi.fn();
+
+vi.mock('next-intl', () => ({
+  useLocale: () => 'en',
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock('@tuturuuu/ui/custom/combobox', () => ({
+  Combobox: ({
+    disabled,
+    onChange,
+    options,
+    placeholder,
+    selected,
+  }: {
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    options: { label: string; value: string }[];
+    placeholder?: string;
+    selected: string;
+  }) => (
+    <select
+      aria-label={placeholder}
+      disabled={disabled}
+      value={selected}
+      onChange={(event) => onChange?.(event.target.value)}
+    >
+      {options.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  ),
+}));
+
+vi.mock('@tuturuuu/internal-api/tasks', () => ({
+  createWorkspaceTaskBoardShare: (
+    ...args: Parameters<typeof createWorkspaceTaskBoardShareMock>
+  ) => createWorkspaceTaskBoardShareMock(...args),
+  deleteWorkspaceTaskBoardShare: (
+    ...args: Parameters<typeof deleteWorkspaceTaskBoardShareMock>
+  ) => deleteWorkspaceTaskBoardShareMock(...args),
+  disableWorkspaceTaskBoardPublicLink: (
+    ...args: Parameters<typeof disableWorkspaceTaskBoardPublicLinkMock>
+  ) => disableWorkspaceTaskBoardPublicLinkMock(...args),
+  enableWorkspaceTaskBoardPublicLink: (
+    ...args: Parameters<typeof enableWorkspaceTaskBoardPublicLinkMock>
+  ) => enableWorkspaceTaskBoardPublicLinkMock(...args),
+  getWorkspaceTaskBoardPublicLink: (
+    ...args: Parameters<typeof getWorkspaceTaskBoardPublicLinkMock>
+  ) => getWorkspaceTaskBoardPublicLinkMock(...args),
+  listWorkspaceTaskBoardShares: (
+    ...args: Parameters<typeof listWorkspaceTaskBoardSharesMock>
+  ) => listWorkspaceTaskBoardSharesMock(...args),
+  listWorkspaceTaskBoardViewableMembers: (
+    ...args: Parameters<typeof listWorkspaceTaskBoardViewableMembersMock>
+  ) => listWorkspaceTaskBoardViewableMembersMock(...args),
+  updateWorkspaceTaskBoardShare: (
+    ...args: Parameters<typeof updateWorkspaceTaskBoardShareMock>
+  ) => updateWorkspaceTaskBoardShareMock(...args),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    error: vi.fn(),
+    success: vi.fn(),
+  },
+}));
+
+function renderBoardShareDialog() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <BoardShareDialog
+        board={{ id: 'board-1', name: 'Tasks' }}
+        onOpenChange={vi.fn()}
+        open
+        wsId="ws-1"
+      />
+    </QueryClientProvider>
+  );
+}
+
+describe('BoardShareDialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    getWorkspaceTaskBoardPublicLinkMock.mockResolvedValue({ publicLink: null });
+    enableWorkspaceTaskBoardPublicLinkMock.mockResolvedValue({
+      publicLink: { code: 'abc123' },
+    });
+    disableWorkspaceTaskBoardPublicLinkMock.mockResolvedValue({
+      publicLink: null,
+    });
+    createWorkspaceTaskBoardShareMock.mockResolvedValue({ share: null });
+    updateWorkspaceTaskBoardShareMock.mockResolvedValue({ share: null });
+    deleteWorkspaceTaskBoardShareMock.mockResolvedValue({ ok: true });
+    listWorkspaceTaskBoardSharesMock.mockResolvedValue({ shares: [] });
+    listWorkspaceTaskBoardViewableMembersMock.mockResolvedValue({
+      members: [
+        {
+          avatar_url: null,
+          display_name: 'Project Manager',
+          email: 'pm@example.com',
+          handle: null,
+          id: 'user-1',
+          is_creator: false,
+          roles: [{ id: 'role-1', name: 'Project manager' }],
+          user_id: 'user-1',
+          workspace_member_type: 'MEMBER',
+        },
+      ],
+    });
+  });
+
+  it('starts compact with all sections collapsed and tooltip copy hidden', async () => {
+    renderBoardShareDialog();
+
+    for (const title of [
+      'ws-task-boards.share.public.title',
+      'ws-task-boards.share.workspace_members.title',
+      'ws-task-boards.share.guests.title',
+    ]) {
+      expect(
+        screen.getByRole('button', { name: new RegExp(title) })
+      ).toHaveAttribute('aria-expanded', 'false');
+    }
+
+    expect(
+      screen.queryByText('ws-task-boards.share.public.description')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('ws-task-boards.share.public.tooltip')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('ws-task-boards.share.workspace_members.description')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('ws-task-boards.share.guests.description')
+    ).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(getWorkspaceTaskBoardPublicLinkMock).toHaveBeenCalledWith(
+        'ws-1',
+        'board-1'
+      );
+    });
+    expect(listWorkspaceTaskBoardViewableMembersMock).not.toHaveBeenCalled();
+
+    expect(await screen.findByText('common.disabled')).toBeInTheDocument();
+    expect(screen.getByText('common.workspace')).toBeInTheDocument();
+    expect(screen.getByText('common.none')).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', {
+        name: /ws-task-boards.share.shared_with/,
+      })
+    ).not.toBeInTheDocument();
+  });
+
+  it('fetches viewable members only when the workspace section opens', async () => {
+    renderBoardShareDialog();
+
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: /ws-task-boards.share.workspace_members.title/,
+      })
+    );
+
+    await waitFor(() => {
+      expect(listWorkspaceTaskBoardViewableMembersMock).toHaveBeenCalledWith(
+        'ws-1',
+        'board-1'
+      );
+    });
+    expect(await screen.findByText('Project Manager')).toBeInTheDocument();
+    expect(screen.getByText('pm@example.com')).toBeInTheDocument();
+  });
+
+  it('keeps direct board guests first-class for invite, update, and remove', async () => {
+    listWorkspaceTaskBoardSharesMock.mockResolvedValue({
+      shares: [
+        {
+          id: 'share-1',
+          email: 'guest@example.com',
+          permission: 'view',
+          user: null,
+          user_id: null,
+        },
+      ],
+    });
+
+    renderBoardShareDialog();
+    await waitFor(() => {
+      expect(listWorkspaceTaskBoardSharesMock).toHaveBeenCalledWith(
+        'ws-1',
+        'board-1'
+      );
+    });
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', {
+          name: /ws-task-boards.share.guests.title/,
+        })
+      ).toHaveTextContent('1');
+    });
+
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: /ws-task-boards.share.guests.title/,
+      })
+    );
+    fireEvent.change(
+      screen.getByPlaceholderText('ws-task-boards.share.email_placeholder'),
+      {
+        target: { value: 'new@example.com' },
+      }
+    );
+    fireEvent.click(screen.getByText('common.share'));
+
+    await waitFor(() => {
+      expect(createWorkspaceTaskBoardShareMock).toHaveBeenCalledWith(
+        'ws-1',
+        'board-1',
+        { email: 'new@example.com', permission: 'view' }
+      );
+    });
+
+    expect(await screen.findAllByText('guest@example.com')).toHaveLength(2);
+
+    fireEvent.change(
+      screen.getAllByLabelText('ws-task-boards.share.permission.view').at(-1)!,
+      { target: { value: 'edit' } }
+    );
+    await waitFor(() => {
+      expect(updateWorkspaceTaskBoardShareMock).toHaveBeenCalledWith(
+        'ws-1',
+        'board-1',
+        { shareId: 'share-1', permission: 'edit' }
+      );
+    });
+
+    fireEvent.click(screen.getByLabelText('common.remove'));
+    await waitFor(() => {
+      expect(deleteWorkspaceTaskBoardShareMock).toHaveBeenCalledWith(
+        'ws-1',
+        'board-1',
+        'share-1'
+      );
+    });
+  });
+});

package/src/components/ui/tu-do/boards/__tests__/workspace-projects-client-page.test.tsx

@@ -3,7 +3,7 @@
  */
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import type { ReactNode } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import WorkspaceProjectsClientPage from '../workspace-projects-client-page';
@@ -97,4 +97,73 @@ describe('WorkspaceProjectsClientPage', () => {
     expect(await screen.findByTestId('boards-view')).toBeInTheDocument();
     expect(mocks.replace).not.toHaveBeenCalled();
   });
+
+  it('does not fetch board data for members without manage_projects', async () => {
+    mocks.checkWorkspacePermission.mockResolvedValue({
+      hasPermission: false,
+    });
+
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <WorkspaceProjectsClientPage />
+      </QueryClientProvider>
+    );
+
+    await waitFor(() => {
+      expect(mocks.replace).toHaveBeenCalledWith('/personal');
+    });
+    expect(mocks.getWorkspaceBoardsData).not.toHaveBeenCalled();
+  });
+
+  it('allows task-board guests to fetch their shared boards', async () => {
+    mocks.getWorkspace.mockResolvedValue({
+      access_type: 'guest',
+      guest_products: ['tasks'],
+      id: 'guest-ws',
+      personal: false,
+    });
+    mocks.checkWorkspacePermission.mockResolvedValue({
+      hasPermission: false,
+    });
+    mocks.getWorkspaceBoardsData.mockResolvedValue({
+      access_type: 'guest',
+      count: 1,
+      data: [
+        {
+          archived_at: null,
+          deleted_at: null,
+          id: 'board-1',
+          name: 'Shared Tasks',
+        },
+      ],
+    });
+
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <WorkspaceProjectsClientPage />
+      </QueryClientProvider>
+    );
+
+    expect(await screen.findByTestId('boards-view')).toBeInTheDocument();
+    expect(mocks.getWorkspaceBoardsData).toHaveBeenCalledWith('guest-ws', {
+      page: 1,
+      pageSize: 10,
+      q: '',
+    });
+    expect(mocks.replace).not.toHaveBeenCalled();
+  });
 });