@tuturuuu/ui 0.17.0 → 0.19.0

package/src/components/ui/tasks/progress/mini-sparkline.tsx

@@ -0,0 +1,56 @@
+import { cn } from '@tuturuuu/utils/format';
+
+interface MiniSparklineProps {
+  data: number[];
+  width?: number;
+  height?: number;
+  className?: string;
+  /** Stroke color (defaults to currentColor). */
+  strokeClassName?: string;
+  /** Accessible label for the SVG. */
+  title?: string;
+}
+
+/**
+ * Tiny axis-less sparkline for inline trends (e.g. a member's last 7 days).
+ * Pure SVG, no dependencies.
+ */
+export function MiniSparkline({
+  data,
+  width = 64,
+  height = 20,
+  className,
+  strokeClassName = 'text-dynamic-blue',
+  title = 'Recent trend',
+}: MiniSparklineProps) {
+  if (data.length === 0) return null;
+  const max = Math.max(...data, 1);
+  const step = data.length > 1 ? width / (data.length - 1) : 0;
+  const points = data
+    .map((value, index) => {
+      const x = index * step;
+      const y = height - (Math.max(0, value) / max) * (height - 2) - 1;
+      return `${x.toFixed(1)},${y.toFixed(1)}`;
+    })
+    .join(' ');
+
+  return (
+    <svg
+      className={cn(strokeClassName, className)}
+      height={height}
+      role="img"
+      viewBox={`0 0 ${width} ${height}`}
+      width={width}
+    >
+      <title>{title}</title>
+      <polyline
+        fill="none"
+        points={points}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+}

package/src/components/ui/tasks/progress/weekday-distribution-chart.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '../../chart';
+
+export interface WeekdayDatum {
+  weekday: number;
+  value: number;
+  activeDays?: number;
+}
+
+interface WeekdayDistributionChartProps {
+  data: WeekdayDatum[];
+  /** Short weekday labels, index 0 = Sunday. */
+  weekdayLabels?: string[];
+  unitLabel?: string;
+  className?: string;
+  height?: number;
+}
+
+const DEFAULT_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+export function WeekdayDistributionChart({
+  data,
+  weekdayLabels = DEFAULT_LABELS,
+  unitLabel = '',
+  className,
+  height = 220,
+}: WeekdayDistributionChartProps) {
+  const rows = useMemo(() => {
+    const byWeekday = new Map(data.map((d) => [d.weekday, d.value]));
+    return weekdayLabels.map((label, index) => ({
+      label,
+      value: Number(byWeekday.get(index) ?? 0),
+    }));
+  }, [data, weekdayLabels]);
+
+  const config: ChartConfig = {
+    value: { label: unitLabel || 'Progress', color: 'var(--chart-2)' },
+  };
+
+  return (
+    <ChartContainer
+      className={className}
+      config={config}
+      style={{ height, aspectRatio: 'auto', width: '100%' }}
+    >
+      <BarChart data={rows} margin={{ left: 4, right: 8, top: 8, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" vertical={false} />
+        <XAxis axisLine={false} dataKey="label" tickLine={false} />
+        <YAxis
+          axisLine={false}
+          tickFormatter={(value) =>
+            new Intl.NumberFormat(undefined, { notation: 'compact' }).format(
+              Number(value)
+            )
+          }
+          tickLine={false}
+          width={36}
+        />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <Bar dataKey="value" fill="var(--color-value)" radius={[4, 4, 0, 0]} />
+      </BarChart>
+    </ChartContainer>
+  );
+}

package/src/components/ui/text-editor/__tests__/task-mention-checkbox.test.ts

@@ -1,5 +1,13 @@
 import { describe, expect, it, vi } from 'vitest';
 
+function resolveMentionChecked(
+  manualOverride: boolean | null,
+  nodeChecked: boolean | undefined,
+  allMentionedTasksCompleted: boolean
+) {
+  return manualOverride ?? nodeChecked ?? allMentionedTasksCompleted;
+}
+
 // Mock the Supabase client
 vi.mock('@tuturuuu/supabase/next/client', () => ({
   createClient: () => ({
@@ -220,8 +228,11 @@ describe('Task Mention Detection', () => {
       const nodeChecked: boolean | undefined = false;
       const allMentionedTasksCompleted = false;
 
-      const result =
-        manualOverride ?? nodeChecked ?? allMentionedTasksCompleted;
+      const result = resolveMentionChecked(
+        manualOverride,
+        nodeChecked,
+        allMentionedTasksCompleted
+      );
 
       expect(result).toBe(true);
     });
@@ -231,8 +242,11 @@ describe('Task Mention Detection', () => {
       const nodeChecked: boolean | undefined = true;
       const allMentionedTasksCompleted = false;
 
-      const result =
-        manualOverride ?? nodeChecked ?? allMentionedTasksCompleted;
+      const result = resolveMentionChecked(
+        manualOverride,
+        nodeChecked,
+        allMentionedTasksCompleted
+      );
 
       expect(result).toBe(true);
     });
@@ -242,8 +256,11 @@ describe('Task Mention Detection', () => {
       const nodeChecked: boolean | undefined = undefined;
       const allMentionedTasksCompleted = true;
 
-      const result =
-        manualOverride ?? nodeChecked ?? allMentionedTasksCompleted;
+      const result = resolveMentionChecked(
+        manualOverride,
+        nodeChecked,
+        allMentionedTasksCompleted
+      );
 
       expect(result).toBe(true);
     });

package/src/components/ui/text-editor/__tests__/upload-placeholder.test.ts

@@ -1,5 +1,5 @@
 import { PluginKey } from '@tiptap/pm/state';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import {
   createLoadingPlaceholder,
   findUploadPlaceholder,
@@ -68,19 +68,10 @@ describe('upload-placeholder', () => {
   });
 
   describe('createLoadingPlaceholder', () => {
-    let styleElement: HTMLStyleElement | null;
-
     beforeEach(() => {
       // Clean up any existing style elements
       const existing = document.querySelector('#upload-spinner-styles');
       if (existing) existing.remove();
-      styleElement = null;
-    });
-
-    afterEach(() => {
-      if (styleElement) {
-        styleElement.remove();
-      }
     });
 
     it('should create placeholder for image', () => {

package/src/components/ui/text-editor/color-controls.tsx

@@ -269,7 +269,7 @@ function SwatchButton({
       type="button"
       variant="ghost"
     >
-      {swatchKind === 'text' ? (
+      {swatchKind === 'text' || swatchKind === 'highlight' ? (
         <TextIcon className="size-4" />
       ) : (
         <span

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

@@ -17,6 +17,7 @@ import type * as Y from 'yjs';
 import { migrateInlineImagesToBlock } from './content-migration';
 import { getEditorExtensions } from './extensions';
 import { handlePlainEnterFallback } from './keyboard';
+import type { TaskMentionNodeViewRenderer } from './mention-extension';
 import { FixedToolbar, ToolBar } from './tool-bar';
 
 const hasContent = (node: JSONContent): boolean => {
@@ -62,7 +63,7 @@ function serializeEditorContent(content: JSONContent | null) {
   return JSON.stringify(content ?? { type: 'doc', content: [] });
 }
 
-interface RichTextEditorProps {
+export interface RichTextEditorProps {
   content: JSONContent | null;
   onChange?: (content: JSONContent | null) => void;
   onImmediateChange?: (content: JSONContent | null) => void;
@@ -110,6 +111,7 @@ interface RichTextEditorProps {
     project_name?: string;
     create_project?: string;
   };
+  renderTaskMention?: TaskMentionNodeViewRenderer;
 }
 
 export function RichTextEditor({
@@ -136,6 +138,7 @@ export function RichTextEditor({
   collaborationUser,
   allowCollaboration = false,
   mentionTranslations,
+  renderTaskMention,
 }: RichTextEditorProps) {
   // Use refs to ensure we have stable references for handlers
   const onImageUploadRef = useRef(onImageUpload);
@@ -312,6 +315,7 @@ export function RichTextEditor({
       getOnImageUpload: getDelegatedImageUpload,
       getOnVideoUpload: getDelegatedImageUpload,
       mentionTranslations,
+      renderTaskMention,
       readOnly,
     }),
     // Migrate inline images to block-level for backward compatibility
@@ -545,6 +549,7 @@ export function RichTextEditor({
           getOnImageUpload: getDelegatedImageUpload,
           getOnVideoUpload: getDelegatedImageUpload,
           mentionTranslations,
+          renderTaskMention,
           readOnly,
         }),
       });
@@ -559,6 +564,7 @@ export function RichTextEditor({
     titlePlaceholder,
     writePlaceholder,
     mentionTranslations,
+    renderTaskMention,
     readOnly,
     getDelegatedImageUpload,
   ]);

package/src/components/ui/text-editor/extensions.ts

@@ -26,7 +26,7 @@ import { CustomImage } from './image-extension';
 import { ListConverter } from './list-converter-extension';
 import { ListItemBase } from './list-item-extension';
 import { MarkdownPaste } from './markdown-paste-extension';
-import { Mention } from './mention-extension';
+import { Mention, type TaskMentionNodeViewRenderer } from './mention-extension';
 import { NodeDrag } from './node-drag-extension';
 import { TaskItemCheckbox } from './task-item-checkbox-extension';
 import { TextShortcuts } from './text-shortcuts-extension';
@@ -64,6 +64,7 @@ interface EditorExtensionsOptions {
     project_name?: string;
     create_project?: string;
   };
+  renderTaskMention?: TaskMentionNodeViewRenderer;
   readOnly?: boolean;
 }
 
@@ -78,6 +79,7 @@ export function getEditorExtensions({
   getOnImageUpload,
   getOnVideoUpload,
   mentionTranslations,
+  renderTaskMention,
   readOnly = false,
 }: EditorExtensionsOptions = {}): Extensions {
   return [
@@ -180,6 +182,7 @@ export function getEditorExtensions({
     Subscript,
     Superscript,
     Mention.configure({
+      renderTaskMention,
       translations: mentionTranslations,
     }),
     ListItemBase,

package/src/components/ui/text-editor/mention-extension.tsx

@@ -1,4 +1,5 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model';
+import type { Editor } from '@tiptap/react';
 import { Node } from '@tiptap/react';
 import {
   Box,
@@ -8,20 +9,25 @@ import {
   User,
 } from '@tuturuuu/icons';
 import { getInitials } from '@tuturuuu/utils/name-helper';
-import { createRoot, type Root } from 'react-dom/client';
 import { renderToString } from 'react-dom/server';
-import { TaskMentionChip } from './task-mention-chip';
-
-// Create a QueryClient instance for mention components
-// This is needed because mention chips are rendered in isolated React roots
-const mentionQueryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 30000,
-      retry: 1,
-    },
-  },
-});
+
+export interface TaskMentionNodeView {
+  dom: HTMLElement;
+  destroy?: () => void;
+  ignoreMutation?: () => boolean;
+  update?: (node: ProseMirrorNode) => boolean;
+}
+
+export interface TaskMentionNodeViewRenderProps {
+  editor: Editor;
+  getPos: () => number | undefined;
+  node: ProseMirrorNode;
+  translations?: Record<string, unknown>;
+}
+
+export type TaskMentionNodeViewRenderer = (
+  props: TaskMentionNodeViewRenderProps
+) => TaskMentionNodeView;
 
 interface MentionVisualMeta {
   prefix: string;
@@ -165,6 +171,7 @@ export const Mention = Node.create({
 
   addOptions() {
     return {
+      renderTaskMention: undefined as TaskMentionNodeViewRenderer | undefined,
       translations: undefined as Record<string, unknown> | undefined,
     };
   },
@@ -353,6 +360,15 @@ export const Mention = Node.create({
 
   addNodeView() {
     return ({ node, editor, getPos }) => {
+      if (node.attrs.entityType === 'task' && this.options.renderTaskMention) {
+        return this.options.renderTaskMention({
+          editor,
+          getPos,
+          node,
+          translations: this.options.translations,
+        });
+      }
+
       let currentDisplayName =
         (node.attrs.displayName as string | null)?.trim() || 'Member';
       let currentAvatarUrl = node.attrs.avatarUrl as string | null;
@@ -361,8 +377,6 @@ export const Mention = Node.create({
       let currentEntityType =
         (node.attrs.entityType as string | null) ?? 'user';
       let currentSubtitle = (node.attrs.subtitle as string | null) ?? null;
-      let currentWorkspaceId =
-        (node.attrs.workspaceId as string | null) ?? null;
       let visuals = getMentionVisualMeta(currentEntityType);
 
       const dom = document.createElement('span');
@@ -370,111 +384,9 @@ export const Mention = Node.create({
       dom.style.verticalAlign = 'middle';
       dom.contentEditable = 'false';
 
-      // For task mentions, render React component with dropdown
-      if (currentEntityType === 'task') {
-        let reactRoot: Root | null = null;
-
-        const renderTaskChip = () => {
-          if (!reactRoot) {
-            reactRoot = createRoot(dom);
-          }
-          reactRoot.render(
-            <QueryClientProvider client={mentionQueryClient}>
-              <TaskMentionChip
-                entityId={currentEntityId ?? ''}
-                displayNumber={currentDisplayName}
-                avatarUrl={currentAvatarUrl}
-                subtitle={currentSubtitle}
-                workspaceId={currentWorkspaceId}
-                translations={this.options.translations}
-                editor={editor}
-                onResolvedTaskMention={(attrs) => {
-                  if (typeof getPos !== 'function') return;
-
-                  const position = getPos();
-                  if (typeof position !== 'number') return;
-
-                  const currentNode = editor.state.doc.nodeAt(position);
-                  if (currentNode?.type.name !== 'mention') {
-                    return;
-                  }
-
-                  editor.view.dispatch(
-                    editor.state.tr.setNodeMarkup(position, undefined, {
-                      ...currentNode.attrs,
-                      avatarUrl: attrs.avatarUrl ?? null,
-                      displayName: attrs.displayName,
-                      entityId: attrs.entityId,
-                      priority: attrs.priority ?? null,
-                      subtitle: attrs.subtitle ?? null,
-                      workspaceId: attrs.workspaceId ?? null,
-                    })
-                  );
-                }}
-              />
-            </QueryClientProvider>
-          );
-        };
-
-        renderTaskChip();
-
-        return {
-          dom,
-          update(updatedNode) {
-            if (updatedNode.type.name !== 'mention') return false;
-            const nextEntityType =
-              (updatedNode.attrs.entityType as string | null) ?? 'user';
-
-            // If entity type changed from task to something else, bail out
-            if (nextEntityType !== 'task') return false;
-
-            const nextDisplayName =
-              (updatedNode.attrs.displayName as string | null)?.trim() ||
-              'Member';
-            const nextAvatarUrl = updatedNode.attrs.avatarUrl as string | null;
-            const nextEntityId =
-              (updatedNode.attrs.entityId as string | null) ??
-              (updatedNode.attrs.userId as string | null) ??
-              null;
-            const nextSubtitle =
-              (updatedNode.attrs.subtitle as string | null) ?? null;
-            const nextWorkspaceId =
-              (updatedNode.attrs.workspaceId as string | null) ?? null;
-
-            // Update state and re-render if changed
-            if (
-              nextDisplayName !== currentDisplayName ||
-              nextAvatarUrl !== currentAvatarUrl ||
-              nextEntityId !== currentEntityId ||
-              nextSubtitle !== currentSubtitle ||
-              nextWorkspaceId !== currentWorkspaceId
-            ) {
-              currentDisplayName = nextDisplayName;
-              currentAvatarUrl = nextAvatarUrl;
-              currentEntityId = nextEntityId ?? '';
-              currentSubtitle = nextSubtitle;
-              currentWorkspaceId = nextWorkspaceId;
-              renderTaskChip();
-            }
-
-            return true;
-          },
-          destroy() {
-            if (reactRoot) {
-              // Use setTimeout to avoid React warnings about synchronous unmounting
-              setTimeout(() => {
-                reactRoot?.unmount();
-                reactRoot = null;
-              }, 0);
-            }
-          },
-          ignoreMutation() {
-            return true;
-          },
-        };
-      }
-
-      // For non-task mentions, use the original DOM-based rendering
+      // The generic editor renders a lightweight DOM mention. Task surfaces can
+      // provide a richer node view without making the shared UI package depend
+      // on task-specific code.
       dom.setAttribute('data-mention', 'true');
       dom.setAttribute('data-user-id', userId);
       dom.setAttribute('data-display-name', currentDisplayName);

package/src/globals.css

@@ -29,6 +29,26 @@
   }
 }
 
+/*
+ * iOS Safari zooms the viewport when a focused editable control computes below
+ * 16px. Protect touch forms across every app that consumes the shared UI styles
+ * without disabling the user's normal pinch-to-zoom controls.
+ */
+@supports (-webkit-touch-callout: none) {
+  @media (pointer: coarse) {
+    input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not(
+        [type="file"]
+      ):not([type="hidden"]):not([type="image"]):not([type="radio"]):not(
+        [type="range"]
+      ):not([type="reset"]):not([type="submit"]),
+    select[class],
+    textarea[class],
+    [contenteditable="true"][class] {
+      font-size: 16px;
+    }
+  }
+}
+
 @layer utilities {
   body {
     font-family: Arial, Helvetica, sans-serif;

package/src/globals.test.ts

@@ -0,0 +1,75 @@
+import { existsSync, readdirSync, readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const repoRoot = existsSync(resolve(process.cwd(), 'packages/ui/package.json'))
+  ? process.cwd()
+  : resolve(process.cwd(), '../..');
+
+function readRepoFile(path: string) {
+  return readFileSync(resolve(repoRoot, path), 'utf8');
+}
+
+function sourceFiles(directory: string): string[] {
+  if (!existsSync(directory)) return [];
+
+  return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const path = resolve(directory, entry.name);
+    if (entry.isDirectory()) return sourceFiles(path);
+    return /\.(css|ts|tsx)$/u.test(entry.name) ? [path] : [];
+  });
+}
+
+describe('shared mobile form ergonomics', () => {
+  it('exports an iOS focus-zoom guard without disabling pinch zoom', () => {
+    const packageJson = JSON.parse(
+      readRepoFile('packages/ui/package.json')
+    ) as {
+      exports: Record<string, string>;
+    };
+    const styles = readRepoFile('packages/ui/src/globals.css');
+
+    expect(packageJson.exports['./globals.css']).toBe('./src/globals.css');
+    expect(styles).toContain('@supports (-webkit-touch-callout: none)');
+    expect(styles).toContain('@media (pointer: coarse)');
+    expect(styles).toContain('input:not([type="button"])');
+    expect(styles).toContain('select[class],');
+    expect(styles).toContain('textarea[class],');
+    expect(styles).toContain('[contenteditable="true"][class]');
+    expect(styles).toMatch(/font-size:\s*16px/u);
+    expect(styles).not.toMatch(/user-scalable|maximum-scale/iu);
+  });
+
+  it('reaches every web app that consumes the shared UI package', () => {
+    const appsDirectory = resolve(repoRoot, 'apps');
+    const appNames = readdirSync(appsDirectory, { withFileTypes: true })
+      .filter((entry) => entry.isDirectory())
+      .map((entry) => entry.name)
+      .filter((appName) => {
+        const manifestPath = resolve(appsDirectory, appName, 'package.json');
+        if (!existsSync(manifestPath)) return false;
+
+        const manifest = JSON.parse(readFileSync(manifestPath, 'utf8')) as {
+          dependencies?: Record<string, string>;
+        };
+        return Boolean(manifest.dependencies?.['@tuturuuu/ui']);
+      });
+
+    expect(appNames.length).toBeGreaterThan(0);
+
+    for (const appName of appNames) {
+      const appSources = sourceFiles(resolve(appsDirectory, appName, 'src'));
+      const importsSharedStyles = appSources.some((path) => {
+        const source = readFileSync(path, 'utf8');
+        return (
+          source.includes('@tuturuuu/ui/globals.css') ||
+          source.includes('@tuturuuu/tasks-ui/globals.css')
+        );
+      });
+
+      expect(importsSharedStyles, `${appName} must load shared UI styles`).toBe(
+        true
+      );
+    }
+  });
+});