@hydralms/components 0.2.0 → 0.3.0

package/src/sections/RequirementsChecklist/types.ts

@@ -18,6 +18,12 @@ export interface RequirementsChecklistProps {
   requirements: Requirement[];
   /** Called when the user clicks an incomplete requirement */
   onRequirementClick?: (uid: string) => void;
+  /** 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/ResourceLibrary/ResourceLibrary.tsx

@@ -1,11 +1,13 @@
 import { useMemo, useState } from "react";
-import { Download, Grid, List as ListIcon } from "lucide-react";
+import { AlertCircle, Download, Grid, List as ListIcon } from "lucide-react";
 import { LearningObjectIcon } from "../../curriculum";
 import { SearchInput, EmptyState } from "../../common";
+import { Skeleton } from "../../ui/skeleton";
 import { Button } from "../../ui/button";
 import { Card, CardContent } from "../../ui/card";
 import { Tabs, TabsList, TabsTrigger } from "../../ui/tabs";
 import { Tooltip, TooltipTrigger, TooltipContent } from "../../ui/tooltip";
+import { Pagination } from "../../common/pagination";
 import type { ResourceLibraryProps, Resource } from "./types";
 import { cn } from "../../lib/utils";
 import { formatFileSize } from "../../utils/format-file-size";
@@ -30,6 +32,13 @@ export function ResourceLibrary({
   showSearch = true,
   emptyMessage = "No resources found",
   readOnly = false,
+  isLoading,
+  error,
+  onRetry,
+  pageSize,
+  currentPage = 1,
+  totalItems,
+  onPageChange,
   className,
   style,
 }: ResourceLibraryProps) {
@@ -53,6 +62,38 @@ export function ResourceLibrary({
     return result;
   }, [resources, activeCategoryUid, searchQuery]);
 
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-4", className)} style={style}>
+        <Skeleton className="h-9 w-full" />
+        <div className="grid grid-cols-3 gap-4">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-32 w-full rounded-lg" />
+          ))}
+        </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>
+    );
+  }
+
   function renderResource(resource: Resource) {
     const iconType = TYPE_TO_ICON[resource.type] ?? "document";
 
@@ -61,10 +102,10 @@ export function ResourceLibrary({
         key={resource.uid}
         className={cn(
           "flex items-center gap-3 px-3 py-2",
-          !readOnly && "cursor-pointer hover:bg-muted",
-          readOnly && "opacity-70",
+          !readOnly && onResourceClick && "cursor-pointer hover:bg-muted",
+          (readOnly || !onResourceClick) && "opacity-70",
         )}
-        onClick={() => !readOnly && onResourceClick(resource)}
+        onClick={() => !readOnly && onResourceClick?.(resource)}
       >
         <div className="min-w-10">
           <LearningObjectIcon type={iconType} size={20} />
@@ -173,18 +214,24 @@ export function ResourceLibrary({
         <EmptyState title={emptyMessage} description="Try adjusting your search or filter." />
       ) : viewMode === "list" ? (
         <Card>
-          {filtered.map(renderResource)}
+          {(onPageChange && pageSize
+            ? filtered.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+            : filtered
+          ).map(renderResource)}
         </Card>
       ) : (
         <div className="grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-2">
-          {filtered.map((resource) => (
+          {(onPageChange && pageSize
+            ? filtered.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+            : filtered
+          ).map((resource) => (
             <Card
               key={resource.uid}
               className={cn(
                 "transition-colors",
-                !readOnly && "cursor-pointer hover:border-primary",
+                !readOnly && onResourceClick && "cursor-pointer hover:border-primary",
               )}
-              onClick={() => !readOnly && onResourceClick(resource)}
+              onClick={() => !readOnly && onResourceClick?.(resource)}
             >
               <CardContent className="pt-4 pb-4">
                 <div className="flex gap-1 items-center mb-1">
@@ -208,6 +255,15 @@ export function ResourceLibrary({
           ))}
         </div>
       )}
+
+      {onPageChange && pageSize && filtered.length > 0 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={Math.ceil((totalItems ?? filtered.length) / pageSize)}
+          onPageChange={onPageChange}
+          className="mt-4"
+        />
+      )}
     </div>
   );
 }

package/src/sections/ResourceLibrary/types.ts

@@ -18,7 +18,7 @@ export interface ResourceLibraryProps {
   /** Optional categories for tab filtering */
   categories?: { uid: string; label: string }[];
   /** Called when the user clicks a resource */
-  onResourceClick: (resource: Resource) => void;
+  onResourceClick?: (resource: Resource) => void;
   /** Called when the user downloads a resource */
   onDownload?: (resource: Resource) => void;
   /** Layout view mode */
@@ -31,6 +31,20 @@ export interface ResourceLibraryProps {
   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 */

package/src/sections/RubricView/RubricView.tsx

@@ -1,4 +1,7 @@
-import { CheckCircle2 } from "lucide-react";
+import { AlertCircle, CheckCircle2 } from "lucide-react";
+import { Skeleton } from "../../ui/skeleton";
+import { EmptyState } from "../../common/empty-state";
+import { Button } from "../../ui/button";
 import { Card, CardContent } from "../../ui/card";
 import {
   Table,
@@ -26,11 +29,44 @@ export function RubricView({
   totalScore,
   maxScore,
   feedback,
+  isLoading,
+  error,
+  onRetry,
   className,
   style,
 }: RubricViewProps) {
   const isScored = selectedLevels && Object.keys(selectedLevels).length > 0;
 
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-4", className)} style={style}>
+        <Skeleton className="h-10 w-full" />
+        {Array.from({ length: 3 }).map((_, i) => (
+          <Skeleton key={i} className="h-16 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("flex flex-col gap-4", className)} style={style}>
       {/* Score header */}

package/src/sections/RubricView/types.ts

@@ -23,6 +23,12 @@ export interface RubricViewProps {
   maxScore?: number;
   /** Instructor feedback text */
   feedback?: string;
+  /** 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/ScrollableQuiz/ScrollableQuiz.tsx

@@ -1,10 +1,15 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { QuestionRenderer } from "../../questions";
 import type { SessionAnswer } from "../../questions/types";
+
+const EMPTY_ANSWERS: SessionAnswer[] = [];
 import { Button } from "../../ui/button";
 import { Card, CardContent } from "../../ui/card";
 import { Separator } from "../../ui/separator";
+import { Skeleton } from "../../ui/skeleton";
 import { cn } from "../../lib/utils";
+import { mergeSessionAnswers } from "../_shared/merge-answers";
+import { SectionShell } from "../_shared/section-shell";
 import type { ScrollableQuizProps } from "./types";
 
 export function ScrollableQuiz({
@@ -17,6 +22,9 @@ export function ScrollableQuiz({
   questionGroups,
   isSubmitting = false,
   readOnly = false,
+  isLoading,
+  error,
+  onRetry,
   className,
   style,
 }: ScrollableQuizProps) {
@@ -60,19 +68,17 @@ export function ScrollableQuiz({
     else questionRefs.current.delete(uid);
   }, []);
 
-  function handleAnswer(questionUid: string, rawAnswers: { uid: string; content?: string }[]) {
-    const newAnswers: SessionAnswer[] = rawAnswers.map((a) => ({
-      uid: questionUid,
-      answerUid: a.uid,
-      content: a.content,
-    }));
-    setSessionAnswers((prev) => {
-      const filtered = prev.filter((a) => a.uid !== questionUid);
-      const merged = [...filtered, ...newAnswers];
-      onAnswerChange?.(merged);
-      return merged;
-    });
-  }
+  const onAnswerChangeRef = useRef(onAnswerChange);
+  onAnswerChangeRef.current = onAnswerChange;
+
+  const handleAnswer = useCallback(
+    (questionUid: string, rawAnswers: { uid: string; content?: string }[]) => {
+      setSessionAnswers((prev) =>
+        mergeSessionAnswers(prev, questionUid, rawAnswers, onAnswerChangeRef.current),
+      );
+    },
+    [],
+  );
 
   function scrollToQuestion(uid: string) {
     questionRefs.current.get(uid)?.scrollIntoView({ behavior: "smooth", block: "center" });
@@ -97,7 +103,21 @@ export function ScrollableQuiz({
   let globalIndex = 0;
 
   return (
-    <div className={cn("flex gap-3", className)} style={style}>
+    <SectionShell
+      isLoading={isLoading}
+      error={error}
+      onRetry={onRetry}
+      className={className}
+      style={style}
+      skeleton={
+        <>
+          <Skeleton className="h-32 w-full" />
+          <Skeleton className="h-32 w-full" />
+          <Skeleton className="h-32 w-full" />
+        </>
+      }
+    >
+    <div className="flex gap-3">
       {/* Main content */}
       <div className="flex-1 min-w-0">
         {orderedQuestions.map((group, gi) => (
@@ -124,7 +144,7 @@ export function ScrollableQuiz({
                     )}
                     <QuestionRenderer
                       question={q}
-                      sessionAnswers={answersByQuestion.get(q.uid) ?? []}
+                      sessionAnswers={answersByQuestion.get(q.uid) ?? EMPTY_ANSWERS}
                       onAnswer={(answers) => handleAnswer(q.uid, answers)}
                       readOnly={readOnly}
                     />
@@ -180,5 +200,6 @@ export function ScrollableQuiz({
         </Card>
       )}
     </div>
+    </SectionShell>
   );
 }

package/src/sections/ScrollableQuiz/types.ts

@@ -33,6 +33,12 @@ export interface ScrollableQuizProps {
   isSubmitting?: boolean;
   /** When true, all inputs are disabled */
   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 */

package/src/sections/StudentProfile/StudentProfile.tsx

@@ -0,0 +1,279 @@
+import { Award, BookOpen, GraduationCap, Calendar } from "lucide-react";
+import { UserAvatar } from "../../social/user-avatar";
+import { StatCard } from "../../progress/stat-card";
+import { AchievementBadge } from "../../progress/achievement-badge";
+import { ProgressRing } from "../../progress/progress-ring";
+import { Card, CardContent } from "../../ui/card";
+import { Badge } from "../../ui/badge";
+import { Button } from "../../ui/button";
+import { Separator } from "../../ui/separator";
+import { Skeleton } from "../../ui/skeleton";
+import { EmptyState } from "../../common/empty-state";
+import { SectionShell } from "../_shared/section-shell";
+import { cn } from "../../lib/utils";
+import { formatTimestamp } from "../../utils/format-timestamp";
+import type { StudentProfileProps } from "./types";
+
+export function StudentProfile({
+  student,
+  enrolledCourses = [],
+  achievements = [],
+  certificates = [],
+  stats,
+  showCourses = true,
+  showAchievements = true,
+  onCourseClick,
+  onCertificateClick,
+  readOnly = false,
+  isLoading,
+  error,
+  onRetry,
+  className,
+  style,
+}: StudentProfileProps) {
+  const completedCourses = enrolledCourses.filter((c) => c.progress >= 100);
+
+  const defaultStats = [
+    {
+      label: "Enrolled",
+      value: String(enrolledCourses.length),
+      icon: <BookOpen size={24} />,
+    },
+    {
+      label: "Completed",
+      value: String(completedCourses.length),
+      icon: <GraduationCap size={24} />,
+    },
+  ];
+
+  const displayStats = stats ?? defaultStats;
+
+  return (
+    <SectionShell
+      isLoading={isLoading}
+      error={error}
+      onRetry={onRetry}
+      className={className}
+      style={style}
+      skeleton={
+        <>
+          {/* Profile header skeleton */}
+          <Card>
+            <CardContent className="p-4 flex items-center gap-4">
+              <Skeleton className="size-12 rounded-full" />
+              <div className="flex-1 space-y-2">
+                <Skeleton className="h-5 w-40" />
+                <Skeleton className="h-4 w-56" />
+              </div>
+            </CardContent>
+          </Card>
+          {/* Stat skeletons */}
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+            <Skeleton className="h-24" />
+            <Skeleton className="h-24" />
+            <Skeleton className="h-24" />
+            <Skeleton className="h-24" />
+          </div>
+          {/* List skeletons */}
+          <Skeleton className="h-8 w-full" />
+          <Skeleton className="h-8 w-full" />
+          <Skeleton className="h-8 w-full" />
+        </>
+      }
+    >
+    <div className={cn("space-y-4", className)} style={style}>
+      {/* Profile Header */}
+      <Card>
+        <CardContent className="p-4 flex items-start gap-4">
+          <UserAvatar
+            displayName={student.displayName}
+            avatarUrl={student.avatarUrl}
+            size="large"
+          />
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 flex-wrap">
+              <h2 className="text-xl font-bold text-foreground">
+                {student.displayName}
+              </h2>
+              {student.role && (
+                <Badge variant="secondary">{student.role}</Badge>
+              )}
+            </div>
+            {student.email && (
+              <p className="text-sm text-muted-foreground">{student.email}</p>
+            )}
+            {student.bio && (
+              <p className="text-sm text-foreground mt-1">{student.bio}</p>
+            )}
+            {student.joinedAt && (
+              <p className="text-xs text-muted-foreground mt-1 flex items-center gap-1">
+                <Calendar size={12} />
+                Joined {new Date(student.joinedAt).toLocaleDateString()}
+              </p>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Stats Row */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        {displayStats.map((stat) => (
+          <StatCard
+            key={stat.label}
+            icon={stat.icon}
+            label={stat.label}
+            value={stat.value}
+          />
+        ))}
+      </div>
+
+      {/* Enrolled Courses */}
+      {showCourses && (
+        <>
+          <Separator />
+          <div className="flex items-center gap-2 mb-2">
+            <p className="text-lg font-semibold text-foreground">Enrolled Courses</p>
+            <Badge variant="secondary">{enrolledCourses.length}</Badge>
+          </div>
+          {enrolledCourses.length > 0 ? (
+            <Card>
+              <CardContent className="p-0 divide-y divide-border">
+                {enrolledCourses.map((course) => (
+                  <div
+                    key={course.uid}
+                    className={cn(
+                      "flex items-center gap-3 px-4 py-3 transition-colors",
+                      !readOnly && onCourseClick && "cursor-pointer hover:bg-muted/50",
+                    )}
+                    onClick={
+                      !readOnly && onCourseClick
+                        ? () => onCourseClick(course.uid)
+                        : undefined
+                    }
+                  >
+                    <ProgressRing value={course.progress} size={32} strokeWidth={3} />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-foreground truncate">
+                        {course.title}
+                      </p>
+                      {course.lastAccessedAt && (
+                        <p className="text-xs text-muted-foreground">
+                          {formatTimestamp(course.lastAccessedAt)}
+                        </p>
+                      )}
+                    </div>
+                    <span className="text-xs text-muted-foreground whitespace-nowrap">
+                      {Math.round(course.progress)}%
+                    </span>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          ) : (
+            <EmptyState
+              icon={<BookOpen />}
+              title="No courses yet"
+              description="This student has not enrolled in any courses."
+            />
+          )}
+        </>
+      )}
+
+      {/* Achievements */}
+      {showAchievements && (
+        <>
+          <Separator />
+          <div className="flex items-center gap-2 mb-2">
+            <p className="text-lg font-semibold text-foreground">Achievements</p>
+            <Badge variant="secondary">{achievements.length}</Badge>
+          </div>
+          {achievements.length > 0 ? (
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2">
+              {achievements.map((achievement) => (
+                <AchievementBadge
+                  key={achievement.uid}
+                  title={achievement.name}
+                  description={achievement.description}
+                  icon={
+                    achievement.iconUrl ? (
+                      <img
+                        src={achievement.iconUrl}
+                        alt={achievement.name}
+                        className="w-12 h-12"
+                      />
+                    ) : undefined
+                  }
+                  earnedDate={achievement.earnedAt}
+                />
+              ))}
+            </div>
+          ) : (
+            <EmptyState
+              icon={<Award />}
+              title="No achievements yet"
+              description="Achievements will appear here as they are earned."
+            />
+          )}
+        </>
+      )}
+
+      {/* Certificates */}
+      <Separator />
+      <div className="flex items-center gap-2 mb-2">
+        <p className="text-lg font-semibold text-foreground">Certificates</p>
+        <Badge variant="secondary">{certificates.length}</Badge>
+      </div>
+      {certificates.length > 0 ? (
+        <Card>
+          <CardContent className="p-0 divide-y divide-border">
+            {certificates.map((cert) => (
+              <div
+                key={cert.uid}
+                className={cn(
+                  "flex items-center gap-3 px-4 py-3 transition-colors",
+                  !readOnly && onCertificateClick && "cursor-pointer hover:bg-muted/50",
+                )}
+                onClick={
+                  !readOnly && onCertificateClick
+                    ? () => onCertificateClick(cert.uid)
+                    : undefined
+                }
+              >
+                <div className="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
+                  <Award size={20} />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-foreground truncate">
+                    {cert.courseName}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    Issued {new Date(cert.issuedAt).toLocaleDateString()}
+                  </p>
+                </div>
+                {cert.certificateUrl && !readOnly && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      window.open(cert.certificateUrl, "_blank");
+                    }}
+                  >
+                    View
+                  </Button>
+                )}
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      ) : (
+        <EmptyState
+          icon={<GraduationCap />}
+          title="No certificates yet"
+          description="Certificates will appear here once courses are completed."
+        />
+      )}
+    </div>
+    </SectionShell>
+  );
+}