@tuturuuu/ui 0.30.1 → 0.31.0

package/src/components/ui/report-problem-model.ts

@@ -0,0 +1,133 @@
+import type { InternalApiClientOptions } from '@tuturuuu/internal-api/client';
+import type { Product, SupportType } from '@tuturuuu/types';
+import type React from 'react';
+import { z } from 'zod';
+export interface ReportProblemFormData {
+  product: Product | '';
+  type: SupportType | '';
+  suggestion: string;
+  media: File[];
+}
+
+export const MAX_MEDIA_SIZE = 5 * 1024 * 1024; // 5MB
+export const MAX_FILES = 5;
+
+// Allowed media types
+export const ALLOWED_IMAGE_TYPES = [
+  'image/png',
+  'image/jpeg',
+  'image/webp',
+  'image/gif',
+];
+export const ALLOWED_VIDEO_TYPES = [
+  'video/mp4',
+  'video/webm',
+  'video/quicktime',
+];
+
+// Zod schema for form validation
+export const reportProblemSchema = z.object({
+  product: z.enum(
+    [
+      'web',
+      'nova',
+      'rewise',
+      'calendar',
+      'finance',
+      'tudo',
+      'tumeet',
+      'shortener',
+      'qr',
+      'drive',
+      'mail',
+      'other',
+    ],
+    {
+      message: 'Please select a product',
+    }
+  ),
+  type: z.enum(['bug', 'feature-request'], {
+    message: 'Please select a support type',
+  }),
+  suggestion: z
+    .string()
+    .trim()
+    .min(1, 'Please describe the issue or suggestion')
+    .max(1000, 'Suggestion must be at most 1000 characters'),
+  media: z
+    .array(z.instanceof(File))
+    .max(MAX_FILES, `You can upload up to ${MAX_FILES} files`)
+    .refine(
+      (files) =>
+        files.every(
+          (f) =>
+            ALLOWED_IMAGE_TYPES.includes(f.type) ||
+            ALLOWED_VIDEO_TYPES.includes(f.type)
+        ),
+      {
+        message:
+          'Only image (PNG, JPEG, WebP, GIF) and video (MP4, WebM, MOV) files are allowed',
+      }
+    )
+    .refine((files) => files.every((f) => f.size <= MAX_MEDIA_SIZE), {
+      message: 'Each file must be 5MB or less',
+    }),
+});
+
+export interface ReportProblemDialogProps {
+  ImageComponent?: React.ComponentType<{
+    src: string;
+    alt: string;
+    className: string;
+    width: number;
+    height: number;
+  }>;
+  t: (
+    key:
+      | 'affected-product-required'
+      | 'cancel'
+      | 'media-alt'
+      | 'media-optional'
+      | 'report-problem'
+      | 'report-problem-description'
+      | 'report-submitted-success'
+      | 'select-product-placeholder'
+      | 'submit-report'
+      | 'submitting'
+      | 'suggestion-improve'
+      | 'suggestion-placeholder',
+    values?: Record<string, string | number>
+  ) => string;
+  apiOptions?: InternalApiClientOptions;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  products?: Array<{ value: Product; label: string }>;
+  className?: string;
+  trigger?: React.ReactNode;
+  showTrigger?: boolean;
+}
+
+export const DEFAULT_PRODUCTS: Array<{ value: Product; label: string }> = [
+  { value: 'web', label: 'Web Dashboard' },
+  { value: 'nova', label: 'Nova' },
+  { value: 'rewise', label: 'Rewise' },
+  { value: 'calendar', label: 'Calendar' },
+  { value: 'finance', label: 'Finance' },
+  { value: 'tudo', label: 'Tuturuuu Tasks' },
+  { value: 'tumeet', label: 'Tuturuuu Meet' },
+  { value: 'shortener', label: 'URL Shortener' },
+  { value: 'qr', label: 'QR Code' },
+  { value: 'drive', label: 'Drive' },
+  { value: 'mail', label: 'Mail' },
+  { value: 'other', label: 'Other' },
+];
+
+export const DEFAULT_SUPPORT_TYPES: Array<{
+  value: SupportType;
+  label: string;
+}> = [
+  { value: 'bug', label: 'Bug Report' },
+  { value: 'feature-request', label: 'Feature Request' },
+];
+
+export const LOCAL_STORAGE_KEY = 'report-problem-form-data';

package/src/components/ui/report-problem-mutation.ts

@@ -0,0 +1,122 @@
+import { useMutation } from '@tanstack/react-query';
+import type { InternalApiClientOptions } from '@tuturuuu/internal-api/client';
+import {
+  createReportUploadUrls,
+  deleteReportUploadPaths,
+  submitReport,
+} from '@tuturuuu/internal-api/reports';
+import type { Product, SupportType } from '@tuturuuu/types';
+
+interface SubmitReportMutationInput {
+  product: Product;
+  type: SupportType;
+  suggestion: string;
+  subject: string;
+  media: File[];
+}
+
+export function useSubmitReportMutation(apiOptions?: InternalApiClientOptions) {
+  return useMutation({
+    mutationFn: async ({
+      product,
+      type,
+      suggestion,
+      subject,
+      media,
+    }: SubmitReportMutationInput) => {
+      const uploadedPaths: string[] = [];
+
+      const cleanupUploadedMedia = async () => {
+        if (uploadedPaths.length === 0) {
+          return;
+        }
+
+        try {
+          await deleteReportUploadPaths({ paths: uploadedPaths }, apiOptions);
+        } catch (cleanupError) {
+          console.error(
+            'Failed to clean up uploaded support report media:',
+            cleanupError
+          );
+        }
+      };
+
+      try {
+        if (media.length > 0) {
+          const { uploads } = await createReportUploadUrls(
+            {
+              files: media.map((file) => ({
+                filename: file.name,
+                contentType: file.type,
+                size: file.size,
+              })),
+            },
+            apiOptions
+          );
+
+          if (uploads.length !== media.length) {
+            throw new Error('Failed to prepare media uploads');
+          }
+
+          for (const [index, upload] of uploads.entries()) {
+            const file = media[index];
+
+            if (!file) {
+              throw new Error('Missing media file during upload');
+            }
+
+            let uploadResponse = await fetch(upload.signedUrl, {
+              method: 'PUT',
+              cache: 'no-store',
+              headers: {
+                Authorization: `Bearer ${upload.token}`,
+                'Content-Type': file.type || 'application/octet-stream',
+              },
+              body: file,
+            });
+
+            if (!uploadResponse.ok) {
+              uploadResponse = await fetch(upload.signedUrl, {
+                method: 'PUT',
+                cache: 'no-store',
+                headers: {
+                  Authorization: `Bearer ${upload.token}`,
+                },
+                body: file,
+              });
+            }
+
+            if (!uploadResponse.ok) {
+              const text = await uploadResponse.text().catch(() => '');
+              throw new Error(
+                `Failed to upload media (${uploadResponse.status})${text ? `: ${text}` : ''}`
+              );
+            }
+
+            uploadedPaths.push(upload.path);
+          }
+        }
+
+        const result = await submitReport(
+          {
+            product,
+            type,
+            suggestion,
+            subject,
+            imagePaths: uploadedPaths,
+          },
+          apiOptions
+        );
+
+        if (!result.success) {
+          throw new Error(result.message || 'Failed to submit report');
+        }
+
+        return result;
+      } catch (error) {
+        await cleanupUploadedMedia();
+        throw error;
+      }
+    },
+  });
+}

package/src/components/ui/save-notification.test.tsx

@@ -0,0 +1,36 @@
+import { act, render, screen } from '@testing-library/react';
+import { afterEach, expect, it, vi } from 'vitest';
+import { notifySave } from './save-notification';
+import { Toaster, toast } from './sonner';
+
+afterEach(() => {
+  toast.dismiss();
+  vi.unstubAllGlobals();
+});
+
+it('renders persistent save failures in the toaster used by app layouts', async () => {
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn(() => ({
+      matches: false,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }))
+  );
+  render(<Toaster />);
+  act(() => {
+    notifySave({
+      title: 'Save failed',
+      description: 'Your draft is preserved. Try again.',
+      variant: 'destructive',
+      duration: Number.POSITIVE_INFINITY,
+    });
+  });
+  expect(await screen.findByText('Save failed')).toBeInTheDocument();
+  expect(
+    screen.getByText('Your draft is preserved. Try again.')
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole('button', { name: 'Close toast' })
+  ).toBeInTheDocument();
+});

package/src/components/ui/save-notification.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { toast } from './sonner';
+
+interface SaveNotification {
+  title: ReactNode;
+  description?: ReactNode;
+  variant?: 'default' | 'destructive';
+  duration?: number;
+}
+
+/** Save feedback must use the Sonner toaster mounted by the application shells. */
+export function notifySave({ title, variant, ...options }: SaveNotification) {
+  const notify = variant === 'destructive' ? toast.error : toast.success;
+  return notify(title, { ...options, closeButton: true });
+}

package/src/components/ui/text-editor/task-item-checkbox-view.test.tsx

@@ -0,0 +1,85 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { NodeViewProps } from '@tiptap/react';
+import { describe, expect, it, vi } from 'vitest';
+import { TaskItemCheckboxContent } from './task-item-checkbox-view';
+
+vi.mock('@tuturuuu/supabase/next/client', () => ({
+  createClient: vi.fn(),
+}));
+
+vi.mock('./task-item-checkbox', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('./task-item-checkbox')>();
+
+  return {
+    ...actual,
+    useMentionedTaskStatuses: () => ({ data: [] }),
+  };
+});
+
+function createNodeViewProps() {
+  const setNodeMarkup = vi.fn();
+  const command = vi.fn(
+    (
+      callback: (props: {
+        tr: { setNodeMarkup: typeof setNodeMarkup };
+      }) => boolean
+    ) => callback({ tr: { setNodeMarkup } })
+  );
+
+  const props = {
+    node: {
+      attrs: { checked: false },
+      descendants: vi.fn(),
+    },
+    getPos: () => 4,
+    editor: {
+      isEditable: true,
+      commands: { command },
+    },
+  } as unknown as NodeViewProps;
+
+  return { command, props, setNodeMarkup };
+}
+
+describe('TaskItemCheckboxContent', () => {
+  it('cycles pointer interactions before the editor can replace the node view', () => {
+    const { props, setNodeMarkup } = createNodeViewProps();
+    render(<TaskItemCheckboxContent {...props} />);
+
+    const checkbox = screen.getByRole('checkbox', {
+      name: 'Task item status',
+    });
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+
+    fireEvent.pointerDown(checkbox, { button: 0, isPrimary: true });
+
+    expect(setNodeMarkup).toHaveBeenLastCalledWith(4, undefined, {
+      checked: 'indeterminate',
+    });
+    expect(checkbox).toHaveAttribute('aria-checked', 'mixed');
+  });
+
+  it('cycles all three states from the keyboard', () => {
+    const { props, setNodeMarkup } = createNodeViewProps();
+    render(<TaskItemCheckboxContent {...props} />);
+
+    const checkbox = screen.getByRole('checkbox', {
+      name: 'Task item status',
+    });
+
+    fireEvent.keyDown(checkbox, { key: ' ' });
+    fireEvent.keyDown(checkbox, { key: 'Enter' });
+    fireEvent.keyDown(checkbox, { key: ' ' });
+
+    expect(setNodeMarkup).toHaveBeenNthCalledWith(1, 4, undefined, {
+      checked: 'indeterminate',
+    });
+    expect(setNodeMarkup).toHaveBeenNthCalledWith(2, 4, undefined, {
+      checked: true,
+    });
+    expect(setNodeMarkup).toHaveBeenNthCalledWith(3, 4, undefined, {
+      checked: false,
+    });
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+  });
+});

package/src/components/ui/text-editor/task-item-checkbox-view.tsx

@@ -68,14 +68,24 @@ export function TaskItemCheckboxContent({
     });
   }, [editor, getPos, node.attrs, checkboxState]);
 
-  const handleCheckboxClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
+  const handleCheckboxPointerDown = useCallback(
+    (event: React.PointerEvent<HTMLButtonElement>) => {
+      if (!event.isPrimary || event.button !== 0) return;
       event.preventDefault();
       event.stopPropagation();
-      if (!editor.isEditable) return;
       handleCheckboxCycle();
     },
-    [editor, handleCheckboxCycle]
+    [handleCheckboxCycle]
+  );
+
+  const handleCheckboxKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      event.preventDefault();
+      event.stopPropagation();
+      handleCheckboxCycle();
+    },
+    [handleCheckboxCycle]
   );
 
   return (
@@ -84,29 +94,29 @@ export function TaskItemCheckboxContent({
         className="task-list-checkbox-label flex shrink-0 select-none pt-2.5"
         contentEditable={false}
       >
+        {/* biome-ignore lint/a11y/useSemanticElements: a button avoids native checkbox state changes while ProseMirror owns the tri-state document update */}
         <button
           type="button"
-          aria-label={
-            isChecked
-              ? 'Checked'
-              : isIndeterminate
-                ? 'Indeterminate'
-                : 'Unchecked'
-          }
+          role="checkbox"
+          aria-label="Task item status"
+          aria-checked={isIndeterminate ? 'mixed' : isChecked}
           aria-disabled={!editor.isEditable}
-          onClick={handleCheckboxClick}
+          onPointerDown={handleCheckboxPointerDown}
+          onKeyDown={handleCheckboxKeyDown}
           className={cn(
-            'task-list-checkbox flex h-4.5 w-4.5 items-center justify-center',
-            'cursor-pointer rounded-lg border-2 bg-background',
-            'transition-all duration-150',
+            'task-list-checkbox flex size-5 items-center justify-center',
+            'cursor-pointer rounded-md border-2 bg-background',
+            'transition-[color,background-color,border-color,box-shadow,transform] duration-150 active:scale-95',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 focus-visible:ring-offset-2',
+            !editor.isEditable && 'cursor-default opacity-70',
             !completedTaskColor && [
               'border-input',
               'hover:scale-105 hover:border-dynamic-gray hover:bg-dynamic-gray/10',
-              'focus:border-dynamic-gray focus:outline-none focus:ring-2 focus:ring-dynamic-gray/30 focus:ring-offset-2',
+              'focus-visible:border-dynamic-gray',
               isChecked &&
-                'border-dynamic-green bg-dynamic-green/20 hover:border-dynamic-green hover:bg-dynamic-green/10 focus:border-dynamic-green focus:ring-dynamic-green/30',
+                'border-dynamic-green bg-dynamic-green/20 hover:border-dynamic-green hover:bg-dynamic-green/10 focus-visible:border-dynamic-green focus-visible:ring-dynamic-green/30',
               isIndeterminate &&
-                'border-dynamic-orange bg-dynamic-orange/20 hover:border-dynamic-orange hover:bg-dynamic-orange/10 focus:border-dynamic-orange focus:ring-dynamic-orange/30',
+                'border-dynamic-orange bg-dynamic-orange/20 hover:border-dynamic-orange hover:bg-dynamic-orange/10 focus-visible:border-dynamic-orange focus-visible:ring-dynamic-orange/30',
             ],
             completedTaskColor === 'red' && [
               'border-dynamic-red/50',