@hiyve/react-assignments

Assignment editor with activity tracking for Hiyve -- rich text editing, due dates, time estimates, status management, per-user activity sessions, and cloud persistence.

Installation

npx @hiyve/cli login
npm install @hiyve/react-assignments
Copy

Quick Start

import { AssignmentEditor } from '@hiyve/react-assignments';
import { HiyveProvider } from '@hiyve/react';

function TeamAssignment() {
  return (
    <HiyveProvider generateRoomToken={generateRoomToken}>
      <AssignmentEditor
        title="Sprint Task"
        enableAutoSave
        onSave={(assignment) => console.log('Saved:', assignment.id)}
        onStatusChange={(status) => console.log('Status:', status)}
      />
    </HiyveProvider>
  );
}
Copy

Components

CreateAssignmentDialog Props

import { CreateAssignmentDialog } from '@hiyve/react-assignments';

<CreateAssignmentDialog
  open={showDialog}
  onClose={() => setShowDialog(false)}
  onCreate={(fileId, fileName, fileData) => {
    console.log('Created:', fileId);
    setShowDialog(false);
  }}
  defaultName="Design Review"
/>
Copy

Hooks

Utilities

AssignmentEditor Props

Imperative Handle (Ref)

AssignmentEditor exposes a ref for external control:

import { useRef } from 'react';
import { AssignmentEditor, type AssignmentEditorRef } from '@hiyve/react-assignments';

function AssignmentsPanel() {
  const editorRef = useRef<AssignmentEditorRef>(null);

  return (
    <div>
      <button
        onClick={() => editorRef.current?.save()}
        disabled={editorRef.current?.isSaving}
      >
        Save Now
      </button>
      <AssignmentEditor ref={editorRef} enableAutoSave />
    </div>
  );
}
Copy

The ref provides: save(), isSaving, hasUnsavedChanges, lastSaved, fileId, addFileReferences(refs), and removeFileReference(fileId).

Using Hooks Directly

For custom editor UIs, use the hooks independently:

import { useAssignmentEditor, useAssignmentPersistence, useActivityTracker } from '@hiyve/react-assignments';

function CustomAssignmentEditor() {
  const { editor, content, isEmpty, getHTML, focus } = useAssignmentEditor({
    placeholder: 'Describe the assignment details...',
    onUpdate: (content) => console.log('Changed'),
  });

  const { startSession, endSession, currentSession } = useActivityTracker({
    userId: currentUser.id,
  });

  // Render your own UI around the editor instance
}
Copy

Activity Tracking

Track per-user work sessions with timers, progress, and notes:

import { AssignmentEditor } from '@hiyve/react-assignments';

<AssignmentEditor
  title="Design Review"
  showMetadata
  showTabs
  enableActivityTracking
  initialAssignment={{
    id: 'task-1',
    title: 'Design Review',
    status: 'in_progress',
    dueDate: '2026-03-01',
    timeHours: 2,
    timeMinutes: 0,
    assignedTo: [],
    content: { type: 'doc', content: [] },
    fileReferences: [],
    userActivities: {},
    authorId: 'user-123',
    lastModified: new Date().toISOString(),
    modifiedBy: 'user-123',
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  }}
  onStatusChange={(status) => console.log('Status:', status)}
/>
Copy

The Activity tab shows individual session controls. The Activity Dashboard tab displays team-wide stats including active users, total time spent, and average progress.

Activity Utilities

import {
  calculateTotalTime,
  formatDuration,
  getActivityStats,
  getStatusColor,
} from '@hiyve/react-assignments';

const totalMinutes = calculateTotalTime(userActivity.sessions);
const display = formatDuration(totalMinutes); // "2h 30m"
const stats = getActivityStats(userActivities);
const color = getStatusColor('in_progress');
Copy

Session Management

AssignmentSession provides a complete session workflow -- creating new assignments, loading saved assignments from file storage, and editing with auto-save:

import { AssignmentSession } from '@hiyve/react-assignments';

<AssignmentSession
  labels={{
    emptyState: { message: 'No assignment open', createButton: 'Create New' },
    header: { newSession: 'New Assignment' },
  }}
  assignmentEditorProps={{
    enableAutoSave: true,
    autoSaveInterval: 5000,
  }}
  onError={(error) => console.error('Assignment error:', error)}
/>
Copy

Customization

All visual aspects of the editor are customizable through labels, icons, colors, and styles props. Pass a partial object -- unspecified keys use defaults.

Labels (i18n)

import { AssignmentEditor } from '@hiyve/react-assignments';

<AssignmentEditor
  labels={{
    title: 'Tarea',
    placeholder: 'Escribe tu tarea...',
    save: 'Guardar',
    saving: 'Guardando...',
    saved: 'Guardado',
    bold: 'Negrita',
    italic: 'Cursiva',
    dueDate: 'Fecha limite',
    status: 'Estado',
  }}
/>
Copy

Icons

import { AssignmentEditor } from '@hiyve/react-assignments';
import { FaBold, FaItalic } from 'react-icons/fa';

<AssignmentEditor
  icons={{
    bold: <FaBold />,
    italic: <FaItalic />,
  }}
/>
Copy

Colors

import { AssignmentEditor, defaultAssignmentEditorColors } from '@hiyve/react-assignments';

// Light theme
<AssignmentEditor
  colors={{
    headerBackground: '#f5f5f5',
    editorBackground: '#ffffff',
    editorText: '#212121',
    toolbarBackground: '#fafafa',
    toolbarButtonActive: '#1976d2',
  }}
/>
Copy

Styles

import { AssignmentEditor } from '@hiyve/react-assignments';

// Compact layout
<AssignmentEditor
  styles={{
    toolbarButtonSize: 28,
    editorPadding: 12,
    editorFontSize: '0.875rem',
    borderRadius: 8,
  }}
/>
Copy

Defaults and merge functions:

Features

• Rich text formatting (bold, italic, strikethrough, highlight, code)
• Headings (H1, H2, H3)
• Lists (bullet, numbered, task/checkbox)
• Tables with full editing
• Assignment metadata: due date, time estimates, status, user assignment
• Per-user activity tracking with session timer and notes
• Team activity dashboard with stats and progress overview
• File reference attachments
• Auto-save to file storage with debouncing
• Undo/redo history
• Read-only mode with ownership-based access control
• Dark theme matching other Hiyve components

Constants

Key Types

Assignment Status Values

type AssignmentStatus = 'not_started' | 'in_progress' | 'on_hold' | 'completed';
Copy

Requirements

• @hiyve/react (^2.0.0) -- components must be rendered inside HiyveProvider
• @hiyve/react-collaboration (^1.0.0) -- optional, needed for AssignmentSession
• @hiyve/utilities (^1.0.0)
• @mui/material (^5.0.0 || ^6.0.0) and @mui/icons-material
• @emotion/react (^11.0.0) and @emotion/styled (^11.0.0)
• react (^18.0.0)

Rich text editor dependencies are bundled with the package -- no separate installation needed.

License

Proprietary - Hiyve SDK