@hydralms/components 0.2.0 → 0.3.0

package/src/questions/scenario.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from "react";
+import { useMemo, useRef, memo } from "react";
 import { Alert, AlertDescription } from "../ui/alert";
 import { Separator } from "../ui/separator";
 import { cn } from "../lib/utils";
@@ -26,14 +26,14 @@ import type { QuestionProps, SessionAnswer } from "./types";
  *   onAnswer={(answers) => handleAnswer(answers)}
  * />
  */
-export const Scenario = ({
+export const Scenario = memo(function Scenario({
   question,
   sessionAnswers,
   onAnswer,
   readOnly = false,
   showCorrectAnswers = false,
   disabled = false,
-}: QuestionProps) => {
+}: QuestionProps) {
   const subQuestions = question.scenarioQuestions ?? [];
 
   // Track the latest answers from each sub-question in a ref so
@@ -137,4 +137,4 @@ export const Scenario = ({
       )}
     </div>
   );
-};
+});

package/src/questions/spreadsheet.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useRef } from "react";
+import { useState, useMemo, useRef, useEffect, memo } from "react";
 import { debounce } from "../utils/debounce";
 import { Input } from "../ui/input";
 import {
@@ -66,14 +66,14 @@ function getCellStatus(
  *   onAnswer={(answers) => handleAnswer(answers)}
  * />
  */
-export const Spreadsheet = ({
+export const Spreadsheet = memo(function Spreadsheet({
   question,
   sessionAnswers,
   onAnswer,
   readOnly = false,
   showCorrectAnswers = false,
   disabled = false,
-}: QuestionProps) => {
+}: QuestionProps) {
   const columns = question.spreadsheetColumns ?? [];
   const rows = question.spreadsheetRows ?? [];
 
@@ -104,6 +104,7 @@ export const Spreadsheet = ({
       }, 300),
     [],
   );
+  useEffect(() => () => debouncedEmit.cancel(), [debouncedEmit]);
 
   const [values, setValues] = useState<Map<string, string>>(() => {
     const map = new Map<string, string>();
@@ -256,4 +257,4 @@ export const Spreadsheet = ({
       )}
     </div>
   );
-};
+});

package/src/questions/true-false.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, memo } from "react";
 import type { QuestionProps } from "./types";
 import { Alert, AlertDescription } from "../ui/alert";
 import { cn } from "../lib/utils";
@@ -12,14 +12,14 @@ import { cn } from "../lib/utils";
  *   onAnswer={(answers) => handleAnswer(answers)}
  * />
  */
-export const TrueFalse = ({
+export const TrueFalse = memo(function TrueFalse({
   question,
   sessionAnswers,
   onAnswer,
   readOnly = false,
   showCorrectAnswers = false,
   disabled = false,
-}: QuestionProps) => {
+}: QuestionProps) {
   const [selectedAnswer, setSelectedAnswer] = useState<string>(
     () => sessionAnswers?.[0]?.answerUid || "",
   );
@@ -53,7 +53,8 @@ export const TrueFalse = ({
     <div className="flex flex-col gap-4">
       <div dangerouslySetInnerHTML={{ __html: question.content }} />
 
-      <div className="flex flex-col gap-2">
+      <fieldset className="flex flex-col gap-2 border-0 p-0 m-0">
+        <legend className="sr-only">True or False</legend>
         {sortedAnswers.map((answer) => (
           <div
             key={answer.uid}
@@ -70,10 +71,16 @@ export const TrueFalse = ({
                 className="accent-primary m-0 shrink-0"
               />
               <span dangerouslySetInnerHTML={{ __html: answer.content }} />
+              {showCorrectAnswers && answer.isCorrect && (
+                <span className="sr-only">(Correct answer)</span>
+              )}
+              {showCorrectAnswers && selectedAnswer === answer.uid && !answer.isCorrect && (
+                <span className="sr-only">(Your answer — incorrect)</span>
+              )}
             </label>
           </div>
         ))}
-      </div>
+      </fieldset>
 
       {showCorrectAnswers && question.explanation && (
         <Alert className="mt-2">
@@ -85,4 +92,4 @@ export const TrueFalse = ({
       )}
     </div>
   );
-};
+});

package/src/sections/AnnouncementFeed/AnnouncementFeed.tsx

@@ -1,13 +1,15 @@
 import { useMemo, useState } from "react";
-import { Pin } from "lucide-react";
+import { AlertCircle, Pin } from "lucide-react";
 import { UserAvatar } from "../../social";
 import { EmptyState } from "../../common";
+import { Skeleton } from "../../ui/skeleton";
 import { Badge } from "../../ui/badge";
 import { Button } from "../../ui/button";
 import { Card, CardContent } from "../../ui/card";
 import type { AnnouncementFeedProps } from "./types";
 import { cn } from "../../lib/utils";
 import { formatTimestamp } from "../../utils/format-timestamp";
+import { Pagination } from "../../common/pagination";
 
 export function AnnouncementFeed({
   announcements,
@@ -17,6 +19,13 @@ export function AnnouncementFeed({
   previewLines = 3,
   emptyMessage = "No announcements yet",
   readOnly = false,
+  isLoading,
+  error,
+  onRetry,
+  pageSize,
+  currentPage = 1,
+  totalItems,
+  onPageChange,
   className,
   style,
 }: AnnouncementFeedProps) {
@@ -41,6 +50,42 @@ export function AnnouncementFeed({
     }
   }
 
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-4", className)} style={style}>
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="flex gap-3 items-start">
+            <Skeleton className="h-10 w-10 rounded-full shrink-0" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-5 w-48" />
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-full" />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={cn("py-12", className)} style={style}>
+        <EmptyState
+          icon={<AlertCircle className="size-10 text-destructive" />}
+          title="Something went wrong"
+          description={error}
+          action={
+            onRetry ? (
+              <Button variant="outline" onClick={onRetry}>
+                Retry
+              </Button>
+            ) : undefined
+          }
+        />
+      </div>
+    );
+  }
+
   if (sorted.length === 0) {
     return (
       <div className={className} style={style}>
@@ -51,7 +96,10 @@ export function AnnouncementFeed({
 
   return (
     <div className={cn("flex flex-col gap-2", className)} style={style}>
-      {sorted.map((a) => {
+      {(onPageChange && pageSize
+        ? sorted.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+        : sorted
+      ).map((a) => {
         const isExpanded = expandedUids.has(a.uid);
 
         return (
@@ -91,9 +139,9 @@ export function AnnouncementFeed({
                   <span className="block text-xs text-muted-foreground mb-1">
                     {a.author.displayName} · {formatTimestamp(a.createdAt)}
                   </span>
-                  <span
+                  <div
                     className={cn(
-                      "text-sm text-foreground",
+                      "text-sm text-foreground [&_p]:mb-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5",
                       !isExpanded && "line-clamp-(--preview-lines) overflow-hidden",
                     )}
                     style={
@@ -101,10 +149,9 @@ export function AnnouncementFeed({
                         ? { "--preview-lines": previewLines } as React.CSSProperties
                         : undefined
                     }
-                  >
-                    {a.content}
-                  </span>
-                  {!isExpanded && a.content.length > 200 && (
+                    dangerouslySetInnerHTML={{ __html: a.content }}
+                  />
+                  {!isExpanded && a.content.replace(/<[^>]*>/g, "").length > 200 && (
                     <Button
                       variant="link"
                       size="xs"
@@ -123,6 +170,15 @@ export function AnnouncementFeed({
           </Card>
         );
       })}
+
+      {onPageChange && pageSize && sorted.length > 0 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={Math.ceil((totalItems ?? sorted.length) / pageSize)}
+          onPageChange={onPageChange}
+          className="mt-4"
+        />
+      )}
     </div>
   );
 }

package/src/sections/AnnouncementFeed/types.ts

@@ -26,6 +26,20 @@ export interface AnnouncementFeedProps {
   emptyMessage?: string;
   /** When true, disables interactions */
   readOnly?: boolean;
+  /** Render skeleton placeholders instead of content */
+  isLoading?: boolean;
+  /** Error message — renders an error state with optional retry */
+  error?: string | null;
+  /** Called when the user clicks retry in the error state */
+  onRetry?: () => void;
+  /** Number of items per page (enables pagination when set with onPageChange) */
+  pageSize?: number;
+  /** Current page (1-indexed) */
+  currentPage?: number;
+  /** Total number of items (for server-side pagination) */
+  totalItems?: number;
+  /** Called when the user navigates to a different page */
+  onPageChange?: (page: number) => void;
   /** CSS class name for the root element */
   className?: string;
   /** Inline styles for the root element */
@@ -37,7 +51,7 @@ export interface Announcement {
   uid: string;
   /** Announcement title */
   title: string;
-  /** Announcement body content */
+  /** Announcement body content. May contain HTML from a rich-text editor. */
   content: string;
   /** Author information */
   author: { displayName: string; avatarUrl?: string; role?: string };

package/src/sections/AssessmentReview/AssessmentReview.tsx

@@ -1,9 +1,13 @@
 import { useMemo } from "react";
+import { AlertCircle } from "lucide-react";
 import { QuestionRenderer } from "../../questions";
 import type { QuestionData, SessionAnswer } from "../../questions/types";
 import { Badge } from "../../ui/badge";
 import { Card, CardContent } from "../../ui/card";
 import { Separator } from "../../ui/separator";
+import { Skeleton } from "../../ui/skeleton";
+import { Button } from "../../ui/button";
+import { EmptyState } from "../../common/empty-state";
 import { cn } from "../../lib/utils";
 import type {
   AssessmentReviewProps,
@@ -140,9 +144,42 @@ export function AssessmentReview({
   score,
   questionGroups,
   showCorrectAnswers = true,
+  isLoading,
+  error,
+  onRetry,
   className,
   style,
 }: AssessmentReviewProps) {
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-4", className)} style={style}>
+        <Skeleton className="h-16 w-full" />
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-24 w-full" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={cn("py-12", className)} style={style}>
+        <EmptyState
+          icon={<AlertCircle className="size-10 text-destructive" />}
+          title="Something went wrong"
+          description={error}
+          action={
+            onRetry ? (
+              <Button variant="outline" onClick={onRetry}>
+                Retry
+              </Button>
+            ) : undefined
+          }
+        />
+      </div>
+    );
+  }
+
   return (
     <div className={cn(className)} style={style}>
       {score && <ScoreHeader score={score} />}

package/src/sections/AssessmentReview/types.ts

@@ -34,6 +34,12 @@ export interface AssessmentReviewProps {
    * @default true
    */
   showCorrectAnswers?: boolean;
+  /** Render skeleton placeholders instead of content */
+  isLoading?: boolean;
+  /** Error message — renders an error state with optional retry */
+  error?: string | null;
+  /** Called when the user clicks retry in the error state */
+  onRetry?: () => void;
   /** CSS class name for the root element */
   className?: string;
   /** Inline styles for the root element */

package/src/sections/AssignmentSubmission/AssignmentSubmission.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Send, Save } from "lucide-react";
+import { Send, Save, AlertCircle } from "lucide-react";
 import { StatusBadge, DueDateDisplay } from "../../common";
 import { FileUploadZone } from "../../content";
 import { Button } from "../../ui/button";
@@ -9,6 +9,9 @@ import { Separator } from "../../ui/separator";
 import { Card, CardContent } from "../../ui/card";
 import { Alert, AlertDescription } from "../../ui/alert";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../ui/tabs";
+import { Skeleton } from "../../ui/skeleton";
+import { EmptyState } from "../../common/empty-state";
+import { cn } from "../../lib/utils";
 import type { AssignmentSubmissionProps, SubmissionData } from "./types";
 
 export function AssignmentSubmission({
@@ -25,6 +28,9 @@ export function AssignmentSubmission({
   grade,
   isSubmitting = false,
   readOnly = false,
+  isLoading,
+  error,
+  onRetry,
   className,
   style,
 }: AssignmentSubmissionProps) {
@@ -33,6 +39,36 @@ export function AssignmentSubmission({
   const [url, setUrl] = useState(existingSubmission?.url ?? "");
   const [activeTab, setActiveTab] = useState<"text" | "file" | "url">(submissionTypes[0]);
 
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-4", className)} style={style}>
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-6 w-20" />
+        <Skeleton className="h-32 w-full" />
+        <Skeleton className="h-10 w-32" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={cn("py-12", className)} style={style}>
+        <EmptyState
+          icon={<AlertCircle className="size-10 text-destructive" />}
+          title="Something went wrong"
+          description={error}
+          action={
+            onRetry ? (
+              <Button variant="outline" onClick={onRetry}>
+                Retry
+              </Button>
+            ) : undefined
+          }
+        />
+      </div>
+    );
+  }
+
   const isEditable = !readOnly && !["submitted", "graded"].includes(status);
 
   function getSubmissionData(): SubmissionData {

package/src/sections/AssignmentSubmission/types.ts

@@ -44,6 +44,12 @@ export interface AssignmentSubmissionProps {
   isSubmitting?: boolean;
   /** When true, disables all interactions */
   readOnly?: boolean;
+  /** Render skeleton placeholders instead of content */
+  isLoading?: boolean;
+  /** Error message — renders an error state with optional retry */
+  error?: string | null;
+  /** Called when the user clicks retry in the error state */
+  onRetry?: () => void;
   /** CSS class name for the root element */
   className?: string;
   /** Inline styles for the root element */