@hydralms/components 0.1.3 → 0.2.0

package/src/questions/types.ts

@@ -3,7 +3,17 @@ export type QuestionTypeEnum =
   | "choice"
   | "true_false"
   | "fill_in_the_blank"
-  | "essay";
+  | "essay"
+  | "matching"
+  | "ordering"
+  | "numeric"
+  | "hotspot"
+  | "inline_choice"
+  | "scenario"
+  | "spreadsheet";
+
+/** Scoring strategy for scenario questions. */
+export type ScenarioScoringMode = "per_question" | "all_or_nothing";
 
 export interface AnswerOption {
   uid: string;
@@ -20,12 +30,124 @@ export interface SessionAnswer {
   confidence?: string;
 }
 
+/** A pair linking a left-side item to its correct right-side target. */
+export interface MatchingPair {
+  uid: string;
+  /** Left-side item content (HTML) */
+  item: string;
+  /** Right-side target content (HTML) */
+  target: string;
+  sequence: number;
+}
+
+/** A clickable region on a hotspot image. Coordinates are percentages (0–100). */
+export interface HotspotRegion {
+  uid: string;
+  shape: "rect" | "circle";
+  /** rect: [x, y, width, height]; circle: [centerX, centerY, radius] */
+  coords: number[];
+  isCorrect?: boolean;
+  label?: string;
+}
+
+/** A dropdown blank embedded in an inline-choice (cloze) passage. */
+export interface InlineBlank {
+  uid: string;
+  options: { uid: string; content: string; isCorrect?: boolean }[];
+  sequence: number;
+}
+
+/** A column definition for a spreadsheet question. */
+export interface SpreadsheetColumn {
+  uid: string;
+  /** Column header text */
+  label: string;
+  /** Data type hint for input rendering and scoring */
+  type: "text" | "numeric" | "currency";
+  /** Column width in rems (default 8) */
+  width?: number;
+}
+
+/** A single cell in a spreadsheet row. */
+export interface SpreadsheetCell {
+  /** Unique identifier — becomes the answerUid in SessionAnswer */
+  uid: string;
+  /** Which column this cell belongs to */
+  columnUid: string;
+  /** When true, cell is pre-filled and not editable */
+  locked: boolean;
+  /** Display value for locked cells, or pre-fill for editable cells */
+  value?: string;
+  /** Expected answer for grading (editable cells only) */
+  correctAnswer?: string;
+  /** Acceptable numeric deviation (default 0 = exact match) */
+  tolerance?: number;
+  /** Hint shown in review mode (e.g., "= Revenue – Expenses") */
+  formula?: string;
+}
+
+/** A row in a spreadsheet question grid. */
+export interface SpreadsheetRow {
+  uid: string;
+  /** Optional row header label (e.g., "Cash", "Accounts Receivable") */
+  label?: string;
+  /** Ordered cells — one per column */
+  cells: SpreadsheetCell[];
+  /** Renders as a bold section divider row */
+  isHeader?: boolean;
+  /** Renders in table footer with top border */
+  isTotals?: boolean;
+}
+
+/** Content blocks associated with a question for open-book reference. */
+export interface QuestionMaterial {
+  /** UID of the question this material is linked to */
+  questionUid: string;
+  /** Display label for the material group (e.g., "Chapter 3: Bonds") */
+  label?: string;
+  /** Content blocks to render in the materials drawer */
+  blocks: import("../content/types").LessonBlock[];
+}
+
 export interface QuestionData {
   uid: string;
   type: QuestionTypeEnum;
+  /** Question prompt (HTML) */
   content: string;
+  /** Explanation shown in review mode (HTML) */
   explanation?: string;
+  /** Answer options for choice / multiple_choice / true_false / ordering */
   answers?: AnswerOption[];
+
+  /** Matching-specific: pairs of items and targets */
+  matchingPairs?: MatchingPair[];
+
+  /** Numeric-specific: correct answer */
+  numericAnswer?: number;
+  /** Numeric-specific: acceptable deviation (default 0 = exact) */
+  numericTolerance?: number;
+  /** Numeric-specific: unit label displayed after input */
+  numericUnit?: string;
+
+  /** Hotspot-specific: image URL */
+  hotspotImageUrl?: string;
+  /** Hotspot-specific: clickable regions */
+  hotspotRegions?: HotspotRegion[];
+  /** Hotspot-specific: allow selecting multiple regions */
+  hotspotMultiSelect?: boolean;
+
+  /** InlineChoice-specific: dropdown blanks embedded in content */
+  inlineBlanks?: InlineBlank[];
+
+  /** Scenario-specific: sub-questions grouped under this scenario's shared context */
+  scenarioQuestions?: QuestionData[];
+  /** Scenario-specific: how the scenario is scored (default "per_question") */
+  scenarioScoringMode?: ScenarioScoringMode;
+
+  /** Spreadsheet-specific: column definitions */
+  spreadsheetColumns?: SpreadsheetColumn[];
+  /** Spreadsheet-specific: row data with cells */
+  spreadsheetRows?: SpreadsheetRow[];
 }
 
 /**

package/src/questions/use-drag-reorder.ts

@@ -0,0 +1,80 @@
+import { useState, useCallback, useRef } from "react";
+
+interface UseDragReorderOptions<T> {
+  items: T[];
+  onReorder: (items: T[]) => void;
+  disabled?: boolean;
+}
+
+export function useDragReorder<T>({
+  items,
+  onReorder,
+  disabled = false,
+}: UseDragReorderOptions<T>) {
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+  const dragIndexRef = useRef<number | null>(null);
+
+  const handleDragStart = useCallback(
+    (index: number) => (e: React.DragEvent) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      dragIndexRef.current = index;
+      setDragIndex(index);
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", String(index));
+    },
+    [disabled],
+  );
+
+  const handleDragOver = useCallback(
+    (index: number) => (e: React.DragEvent) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      setDragOverIndex(index);
+    },
+    [],
+  );
+
+  const handleDrop = useCallback(
+    (index: number) => (e: React.DragEvent) => {
+      e.preventDefault();
+      const fromIndex = dragIndexRef.current;
+      if (fromIndex === null || fromIndex === index) {
+        setDragIndex(null);
+        setDragOverIndex(null);
+        return;
+      }
+
+      const next = [...items];
+      const [moved] = next.splice(fromIndex, 1);
+      next.splice(index, 0, moved);
+
+      setDragIndex(null);
+      setDragOverIndex(null);
+      onReorder(next);
+    },
+    [items, onReorder],
+  );
+
+  const handleDragEnd = useCallback(() => {
+    setDragIndex(null);
+    setDragOverIndex(null);
+    dragIndexRef.current = null;
+  }, []);
+
+  const getDragProps = useCallback(
+    (index: number) => ({
+      draggable: !disabled,
+      onDragStart: handleDragStart(index),
+      onDragOver: handleDragOver(index),
+      onDrop: handleDrop(index),
+      onDragEnd: handleDragEnd,
+    }),
+    [disabled, handleDragStart, handleDragOver, handleDrop, handleDragEnd],
+  );
+
+  return { getDragProps, dragIndex, dragOverIndex };
+}

package/src/sections/AnnouncementFeed/AnnouncementFeed.tsx

@@ -7,20 +7,7 @@ import { Button } from "../../ui/button";
 import { Card, CardContent } from "../../ui/card";
 import type { AnnouncementFeedProps } from "./types";
 import { cn } from "../../lib/utils";
-
-function formatTimestamp(iso: string): string {
-  const date = new Date(iso);
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMins = Math.floor(diffMs / 60000);
-  if (diffMins < 1) return "Just now";
-  if (diffMins < 60) return `${diffMins}m ago`;
-  const diffHours = Math.floor(diffMins / 60);
-  if (diffHours < 24) return `${diffHours}h ago`;
-  const diffDays = Math.floor(diffHours / 24);
-  if (diffDays < 7) return `${diffDays}d ago`;
-  return date.toLocaleDateString();
-}
+import { formatTimestamp } from "../../utils/format-timestamp";
 
 export function AnnouncementFeed({
   announcements,
@@ -77,7 +64,7 @@ export function AnnouncementFeed({
             )}
             onClick={() => onSelect && !readOnly ? onSelect(a) : toggleExpand(a.uid)}
           >
-            <CardContent className="pt-4 pb-4">
+            <CardContent className="py-4">
               <div className="flex gap-1.5 items-start">
                 {showAvatars && (
                   <UserAvatar

package/src/sections/AssessmentReview/AssessmentReview.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { QuestionRenderer } from "../../questions";
 import type { QuestionData, SessionAnswer } from "../../questions/types";
 import { Badge } from "../../ui/badge";
@@ -25,7 +26,7 @@ function ScoreHeader({
     <Card className="mb-3">
       <CardContent className="pt-6">
         <div className="flex flex-wrap items-center gap-2">
-          <div>
+          <div className="flex items-baseline gap-2">
             <span className="text-2xl font-bold leading-none text-foreground">{pct}%</span>
             <span className="text-sm text-muted-foreground">
               {score.correct} of {score.total} correct
@@ -56,6 +57,16 @@ function QuestionList({
   sessionAnswers: SessionAnswer[];
   showCorrectAnswers: boolean;
 }) {
+  const answersByQuestion = useMemo(() => {
+    const map = new Map<string, SessionAnswer[]>();
+    for (const a of sessionAnswers) {
+      const list = map.get(a.uid);
+      if (list) list.push(a);
+      else map.set(a.uid, [a]);
+    }
+    return map;
+  }, [sessionAnswers]);
+
   return (
     <div className="flex flex-col gap-3">
       {questions.map((question, idx) => (
@@ -69,7 +80,7 @@ function QuestionList({
           <CardContent className="pt-4 pb-4">
             <QuestionRenderer
               question={question}
-              sessionAnswers={sessionAnswers.filter((a) => a.uid === question.uid)}
+              sessionAnswers={answersByQuestion.get(question.uid) ?? []}
               readOnly
               showCorrectAnswers={showCorrectAnswers}
             />

package/src/sections/AssignmentSubmission/AssignmentSubmission.tsx

@@ -3,7 +3,7 @@ import { Send, Save } from "lucide-react";
 import { StatusBadge, DueDateDisplay } from "../../common";
 import { FileUploadZone } from "../../content";
 import { Button } from "../../ui/button";
-import { Textarea } from "../../ui/textarea";
+import { RichTextEditor } from "../../ui/rich-text-editor";
 import { Input } from "../../ui/input";
 import { Separator } from "../../ui/separator";
 import { Card, CardContent } from "../../ui/card";
@@ -99,11 +99,12 @@ export function AssignmentSubmission({
               </TabsList>
               {submissionTypes.includes("text") && (
                 <TabsContent value="text">
-                  <Textarea
+                  <RichTextEditor
                     className="min-h-45"
                     placeholder="Type your submission..."
                     value={textContent}
-                    onChange={(e) => setTextContent(e.target.value)}
+                    onChange={(html) => setTextContent(html)}
+                    variant="default"
                   />
                 </TabsContent>
               )}
@@ -132,11 +133,12 @@ export function AssignmentSubmission({
           ) : (
             <>
               {submissionTypes.includes("text") && (
-                <Textarea
+                <RichTextEditor
                   className="min-h-45 mb-2"
                   placeholder="Type your submission..."
                   value={textContent}
-                  onChange={(e) => setTextContent(e.target.value)}
+                  onChange={(html) => setTextContent(html)}
+                  variant="default"
                 />
               )}
               {submissionTypes.includes("file") && (