@tuturuuu/ui 0.16.0 → 0.18.0

package/src/components/ui/tasks/progress/daily-bar-chart.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '../../chart';
+
+export interface DailyBarDatum {
+  date: string;
+  value: number;
+}
+
+interface DailyBarChartProps {
+  data: DailyBarDatum[];
+  unitLabel?: string;
+  /** Only render the trailing N days (default 30). */
+  days?: number;
+  className?: string;
+  height?: number;
+}
+
+function parseIsoDate(value: string) {
+  const [y, m, d] = value.split('-').map(Number);
+  return new Date(y ?? 1970, (m ?? 1) - 1, d ?? 1);
+}
+
+export function DailyBarChart({
+  data,
+  unitLabel = '',
+  days = 30,
+  className,
+  height = 240,
+}: DailyBarChartProps) {
+  const rows = useMemo(
+    () =>
+      [...data]
+        .filter((d) => d?.date)
+        .sort((a, b) => a.date.localeCompare(b.date))
+        .slice(-days),
+    [data, days]
+  );
+
+  const config: ChartConfig = {
+    value: { label: unitLabel || 'Progress', color: 'var(--chart-1)' },
+  };
+
+  const dateFormatter = useMemo(
+    () =>
+      new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' }),
+    []
+  );
+
+  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="date"
+          minTickGap={24}
+          tickFormatter={(value) =>
+            dateFormatter.format(parseIsoDate(String(value)))
+          }
+          tickLine={false}
+        />
+        <YAxis
+          axisLine={false}
+          tickFormatter={(value) =>
+            new Intl.NumberFormat(undefined, { notation: 'compact' }).format(
+              Number(value)
+            )
+          }
+          tickLine={false}
+          width={36}
+        />
+        <ChartTooltip
+          content={
+            <ChartTooltipContent
+              labelFormatter={(value) =>
+                dateFormatter.format(parseIsoDate(String(value)))
+              }
+            />
+          }
+        />
+        <Bar dataKey="value" fill="var(--color-value)" radius={[4, 4, 0, 0]} />
+      </BarChart>
+    </ChartContainer>
+  );
+}

package/src/components/ui/tasks/progress/habit-gauge.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { cn } from '@tuturuuu/utils/format';
+
+interface HabitGaugeProps {
+  /** Progress within the current period. */
+  value: number;
+  /** Threshold that marks the period as "hit". */
+  target: number;
+  unitLabel?: string;
+  /** Caption under the ring, e.g. "This week". */
+  caption?: string;
+  size?: number;
+  className?: string;
+}
+
+/**
+ * Radial gauge that fills toward the period threshold and turns gold once met.
+ * Rendered with plain SVG to stay light and theme-aware.
+ */
+export function HabitGauge({
+  value,
+  target,
+  unitLabel = '',
+  caption,
+  size = 120,
+  className,
+}: HabitGaugeProps) {
+  const safeTarget = target > 0 ? target : 1;
+  const ratio = Math.max(0, Math.min(value / safeTarget, 1));
+  const met = value >= safeTarget && target > 0;
+  const stroke = 10;
+  const radius = (size - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const dash = circumference * ratio;
+  const percent = Math.round(ratio * 100);
+
+  return (
+    <div className={cn('flex flex-col items-center gap-1.5', className)}>
+      <div className="relative" style={{ width: size, height: size }}>
+        <svg
+          className="-rotate-90"
+          height={size}
+          role="img"
+          aria-label={`${value} of ${target} ${unitLabel}`.trim()}
+          viewBox={`0 0 ${size} ${size}`}
+          width={size}
+        >
+          <circle
+            className="text-foreground/[0.08]"
+            cx={size / 2}
+            cy={size / 2}
+            fill="none"
+            r={radius}
+            stroke="currentColor"
+            strokeWidth={stroke}
+          />
+          <circle
+            className={cn(
+              'transition-all duration-500',
+              met ? 'text-dynamic-amber' : 'text-dynamic-green'
+            )}
+            cx={size / 2}
+            cy={size / 2}
+            fill="none"
+            r={radius}
+            stroke="currentColor"
+            strokeDasharray={`${dash} ${circumference}`}
+            strokeLinecap="round"
+            strokeWidth={stroke}
+          />
+        </svg>
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          <span
+            className={cn(
+              'font-bold text-2xl tabular-nums',
+              met && 'text-dynamic-amber'
+            )}
+          >
+            {percent}%
+          </span>
+          <span className="text-[10px] text-muted-foreground">
+            {Number(value).toLocaleString()}/{Number(target).toLocaleString()}
+          </span>
+        </div>
+      </div>
+      {caption ? (
+        <span className="text-muted-foreground text-xs">{caption}</span>
+      ) : null}
+    </div>
+  );
+}

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/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

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "slot-text/style.css";
 @source "components";
 @source "../../../node_modules/streamdown/dist/*.js";
 @source "../../../node_modules/@streamdown/math/dist/*.js";

package/src/lib/workspace-actions.ts

@@ -1,9 +1,5 @@
 'use server';
 
-import {
-  normalizeTaskBoardShareEmail,
-  strongestTaskBoardGuestPermission,
-} from '@tuturuuu/apis/tu-do/board-access';
 import {
   createAdminClient,
   createClient,
@@ -16,6 +12,21 @@ const WORKSPACE_SUMMARY_UNAUTHORIZED = 'WORKSPACE_SUMMARY_UNAUTHORIZED';
 const DEFAULT_WORKSPACE_SEARCH_LIMIT = 50;
 const MAX_WORKSPACE_SEARCH_LIMIT = 100;
 
+type TaskBoardGuestPermission = 'view' | 'edit';
+
+function normalizeTaskBoardShareEmail(email: string | null | undefined) {
+  const normalized = email?.trim().toLowerCase();
+  return normalized || null;
+}
+
+function strongestTaskBoardGuestPermission(
+  permissions: Array<TaskBoardGuestPermission | null | undefined>
+): TaskBoardGuestPermission | null {
+  if (permissions.includes('edit')) return 'edit';
+  if (permissions.includes('view')) return 'view';
+  return null;
+}
+
 function normalizeWorkspaceTier(
   tier: string | null | undefined
 ): InternalApiWorkspaceSummary['tier'] {