@semiont/react-ui 0.2.33-build.79 → 0.2.33-build.81

package/src/components/__tests__/SessionTimer.test.tsx

@@ -3,22 +3,22 @@ import { render, screen } from '@testing-library/react';
 import { SessionTimer } from '../SessionTimer';
 
 // Mock the hooks
-vi.mock('@semiont/react-ui', async () => {
-  const actual = await vi.importActual('@semiont/react-ui');
-  return {
-    ...actual,
-    useSessionExpiry: vi.fn(),
-    useFormattedTime: vi.fn(),
-  };
-});
+vi.mock('../../hooks/useSessionExpiry', () => ({
+  useSessionExpiry: vi.fn(),
+}));
+
+vi.mock('../../lib/formatTime', () => ({
+  formatTime: vi.fn(),
+}));
 
-import { useSessionExpiry, useFormattedTime } from '@semiont/react-ui';
+import { useSessionExpiry } from '../../hooks/useSessionExpiry';
+import { formatTime } from '../../lib/formatTime';
 
 describe('SessionTimer', () => {
   describe('Rendering', () => {
     it('should render formatted time when available', () => {
       vi.mocked(useSessionExpiry).mockReturnValue({ timeRemaining: 300000 } as any);
-      vi.mocked(useFormattedTime).mockReturnValue('5:00');
+      vi.mocked(formatTime).mockReturnValue('5:00');
 
       render(<SessionTimer />);
 
@@ -28,7 +28,7 @@ describe('SessionTimer', () => {
 
     it('should have correct class name', () => {
       vi.mocked(useSessionExpiry).mockReturnValue({ timeRemaining: 300000 } as any);
-      vi.mocked(useFormattedTime).mockReturnValue('5:00');
+      vi.mocked(formatTime).mockReturnValue('5:00');
 
       const { container } = render(<SessionTimer />);
 
@@ -37,7 +37,7 @@ describe('SessionTimer', () => {
 
     it('should display complete message with formatted time', () => {
       vi.mocked(useSessionExpiry).mockReturnValue({ timeRemaining: 120000 } as any);
-      vi.mocked(useFormattedTime).mockReturnValue('2:00');
+      vi.mocked(formatTime).mockReturnValue('2:00');
 
       render(<SessionTimer />);
 
@@ -49,7 +49,7 @@ describe('SessionTimer', () => {
   describe('Null Cases', () => {
     it('should return null when formattedTime is null', () => {
       vi.mocked(useSessionExpiry).mockReturnValue({ timeRemaining: 0 } as any);
-      vi.mocked(useFormattedTime).mockReturnValue(null);
+      vi.mocked(formatTime).mockReturnValue(null);
 
       const { container } = render(<SessionTimer />);
 
@@ -58,7 +58,7 @@ describe('SessionTimer', () => {
 
     it('should return null when formattedTime is undefined', () => {
       vi.mocked(useSessionExpiry).mockReturnValue({ timeRemaining: 0 } as any);
-      vi.mocked(useFormattedTime).mockReturnValue(undefined as any);
+      vi.mocked(formatTime).mockReturnValue(undefined as any);
 
       const { container } = render(<SessionTimer />);
 
@@ -67,7 +67,7 @@ describe('SessionTimer', () => {
 
     it('should return null when formattedTime is empty string', () => {
       vi.mocked(useSessionExpiry).mockReturnValue({ timeRemaining: 0 } as any);
-      vi.mocked(useFormattedTime).mockReturnValue('');
+      vi.mocked(formatTime).mockReturnValue('');
 
       const { container } = render(<SessionTimer />);
 
@@ -79,31 +79,31 @@ describe('SessionTimer', () => {
     it('should call useSessionExpiry hook', () => {
       const mockUseSessionExpiry = vi.mocked(useSessionExpiry);
       mockUseSessionExpiry.mockReturnValue({ timeRemaining: 100000 } as any);
-      vi.mocked(useFormattedTime).mockReturnValue('1:40');
+      vi.mocked(formatTime).mockReturnValue('1:40');
 
       render(<SessionTimer />);
 
       expect(mockUseSessionExpiry).toHaveBeenCalled();
     });
 
-    it('should call useFormattedTime with timeRemaining', () => {
-      const mockUseFormattedTime = vi.mocked(useFormattedTime);
+    it('should call formatTime with timeRemaining', () => {
+      const mockFormatTime = vi.mocked(formatTime);
       vi.mocked(useSessionExpiry).mockReturnValue({ timeRemaining: 300000 } as any);
-      mockUseFormattedTime.mockReturnValue('5:00');
+      mockFormatTime.mockReturnValue('5:00');
 
       render(<SessionTimer />);
 
-      expect(mockUseFormattedTime).toHaveBeenCalledWith(300000);
+      expect(mockFormatTime).toHaveBeenCalledWith(300000);
     });
 
-    it('should pass correct timeRemaining to useFormattedTime', () => {
-      const mockUseFormattedTime = vi.mocked(useFormattedTime);
+    it('should pass correct timeRemaining to formatTime', () => {
+      const mockFormatTime = vi.mocked(formatTime);
       vi.mocked(useSessionExpiry).mockReturnValue({ timeRemaining: 12345 } as any);
-      mockUseFormattedTime.mockReturnValue('0:12');
+      mockFormatTime.mockReturnValue('0:12');
 
       render(<SessionTimer />);
 
-      expect(mockUseFormattedTime).toHaveBeenCalledWith(12345);
+      expect(mockFormatTime).toHaveBeenCalledWith(12345);
     });
   });
 
@@ -118,7 +118,7 @@ describe('SessionTimer', () => {
 
       testCases.forEach(({ timeRemaining, formatted }) => {
         vi.mocked(useSessionExpiry).mockReturnValue({ timeRemaining } as any);
-        vi.mocked(useFormattedTime).mockReturnValue(formatted);
+        vi.mocked(formatTime).mockReturnValue(formatted);
 
         const { unmount } = render(<SessionTimer />);
 
@@ -132,17 +132,17 @@ describe('SessionTimer', () => {
   describe('Re-rendering', () => {
     it('should update when timeRemaining changes', () => {
       const mockUseSessionExpiry = vi.mocked(useSessionExpiry);
-      const mockUseFormattedTime = vi.mocked(useFormattedTime);
+      const mockFormatTime = vi.mocked(formatTime);
 
       mockUseSessionExpiry.mockReturnValue({ timeRemaining: 60000 } as any);
-      mockUseFormattedTime.mockReturnValue('1:00');
+      mockFormatTime.mockReturnValue('1:00');
 
       const { rerender } = render(<SessionTimer />);
       expect(screen.getByText('Session: 1:00 remaining')).toBeInTheDocument();
 
       // Simulate time passing
       mockUseSessionExpiry.mockReturnValue({ timeRemaining: 30000 } as any);
-      mockUseFormattedTime.mockReturnValue('0:30');
+      mockFormatTime.mockReturnValue('0:30');
 
       rerender(<SessionTimer />);
       expect(screen.getByText('Session: 0:30 remaining')).toBeInTheDocument();
@@ -150,13 +150,13 @@ describe('SessionTimer', () => {
 
     it('should hide when formattedTime becomes null', () => {
       vi.mocked(useSessionExpiry).mockReturnValue({ timeRemaining: 60000 } as any);
-      vi.mocked(useFormattedTime).mockReturnValue('1:00');
+      vi.mocked(formatTime).mockReturnValue('1:00');
 
       const { container, rerender } = render(<SessionTimer />);
       expect(screen.getByText('Session: 1:00 remaining')).toBeInTheDocument();
 
       // Time expires
-      vi.mocked(useFormattedTime).mockReturnValue(null);
+      vi.mocked(formatTime).mockReturnValue(null);
 
       rerender(<SessionTimer />);
       expect(container.firstChild).toBeNull();
@@ -166,7 +166,7 @@ describe('SessionTimer', () => {
   describe('Edge Cases', () => {
     it('should handle zero timeRemaining', () => {
       vi.mocked(useSessionExpiry).mockReturnValue({ timeRemaining: 0 } as any);
-      vi.mocked(useFormattedTime).mockReturnValue('0:00');
+      vi.mocked(formatTime).mockReturnValue('0:00');
 
       render(<SessionTimer />);
 
@@ -175,7 +175,7 @@ describe('SessionTimer', () => {
 
     it('should handle negative timeRemaining', () => {
       vi.mocked(useSessionExpiry).mockReturnValue({ timeRemaining: -1000 } as any);
-      vi.mocked(useFormattedTime).mockReturnValue('expired');
+      vi.mocked(formatTime).mockReturnValue('expired');
 
       render(<SessionTimer />);
 
@@ -184,7 +184,7 @@ describe('SessionTimer', () => {
 
     it('should handle very large timeRemaining', () => {
       vi.mocked(useSessionExpiry).mockReturnValue({ timeRemaining: 999999999 } as any);
-      vi.mocked(useFormattedTime).mockReturnValue('16666:39');
+      vi.mocked(formatTime).mockReturnValue('16666:39');
 
       render(<SessionTimer />);
 

package/src/components/annotation/AnnotateToolbar.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useRef, useEffect } from 'react';
 import { useTranslations } from '../../contexts/TranslationContext';
+import { useEventBus } from '../../contexts/EventBusContext';
 import { getSupportedShapes } from '../../lib/media-shapes';
 import type { Annotator } from '../../lib/annotation-registry';
 import './annotations.css';
@@ -15,18 +16,14 @@ export type ShapeType = 'rectangle' | 'circle' | 'polygon';
 interface AnnotateToolbarProps {
   selectedMotivation: SelectionMotivation | null;
   selectedClick: ClickAction;
-  onSelectionChange: (motivation: SelectionMotivation | null) => void;
-  onClickChange: (motivation: ClickAction) => void;
   showSelectionGroup?: boolean;
   showDeleteButton?: boolean;
   showShapeGroup?: boolean;
   selectedShape?: ShapeType;
-  onShapeChange?: (shape: ShapeType) => void;
   mediaType?: string | null;  // MIME type to determine supported shapes
 
   // Mode props
   annotateMode: boolean;
-  onAnnotateModeToggle: () => void;
 
   // Annotators for emoji lookup
   annotators: Record<string, Annotator>;
@@ -102,22 +99,27 @@ function DropdownGroup({
   );
 }
 
+/**
+ * Toolbar for annotation controls with mode, selection, click, and shape options
+ *
+ * @emits toolbar:selection-changed - Selection motivation changed. Payload: { motivation: SelectionMotivation | null }
+ * @emits toolbar:click-changed - Click action mode changed. Payload: { action: ClickAction }
+ * @emits toolbar:shape-changed - Drawing shape changed. Payload: { shape: ShapeType }
+ * @emits view:mode-toggled - View mode toggled between browse and annotate. Payload: undefined
+ */
 export function AnnotateToolbar({
   selectedMotivation,
   selectedClick,
-  onSelectionChange,
-  onClickChange,
   showSelectionGroup = true,
   showDeleteButton = true,
   showShapeGroup = false,
   selectedShape = 'rectangle',
-  onShapeChange,
   mediaType,
   annotateMode = false,
-  onAnnotateModeToggle,
   annotators
 }: AnnotateToolbarProps) {
   const t = useTranslations('AnnotateToolbar');
+  const eventBus = useEventBus();
 
   // Helper to get emoji from annotators by motivation (with fallback for safety)
   const getMotivationEmoji = (motivation: SelectionMotivation): string => {
@@ -186,9 +188,11 @@ export function AnnotateToolbar({
   const handleSelectionClick = (motivation: SelectionMotivation | null) => {
     // If null is clicked, always deselect. Otherwise toggle.
     if (motivation === null) {
-      onSelectionChange(null);
+      eventBus.emit('toolbar:selection-changed', { motivation: null });
     } else {
-      onSelectionChange(selectedMotivation === motivation ? null : motivation);
+      eventBus.emit('toolbar:selection-changed', {
+        motivation: selectedMotivation === motivation ? null : motivation
+      });
     }
     // Close dropdown after selection
     setSelectionPinned(false);
@@ -196,23 +200,21 @@ export function AnnotateToolbar({
   };
 
   const handleClickClick = (action: ClickAction) => {
-    onClickChange(action);
+    eventBus.emit('toolbar:click-changed', { action });
     // Close dropdown after selection
     setClickPinned(false);
     setClickHovered(false);
   };
 
   const handleShapeClick = (shape: ShapeType) => {
-    if (onShapeChange) {
-      onShapeChange(shape);
-    }
+    eventBus.emit('toolbar:shape-changed', { shape });
     // Close dropdown after selection
     setShapePinned(false);
     setShapeHovered(false);
   };
 
   const handleModeToggle = () => {
-    onAnnotateModeToggle();
+    eventBus.emit('view:mode-toggled', undefined);
     setModePinned(false);
     setModeHovered(false);
   };