@hydralms/components 0.1.3 → 0.3.0

package/src/sections/_shared/use-assessment-session.ts

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { QuestionNavigatorItem } from "../../assessment-toolbar/types";
+import type { QuestionData, QuestionMaterial, SessionAnswer } from "../../questions/types";
+import { mergeSessionAnswers } from "./merge-answers";
+
+export interface UseAssessmentSessionOptions {
+  questions: QuestionData[];
+  initialAnswers?: SessionAnswer[];
+  onAnswerChange?: (answers: SessionAnswer[]) => void;
+  questionMaterials?: QuestionMaterial[];
+}
+
+export function useAssessmentSession({
+  questions,
+  initialAnswers = [],
+  onAnswerChange,
+  questionMaterials,
+}: UseAssessmentSessionOptions) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [sessionAnswers, setSessionAnswers] = useState<SessionAnswer[]>(initialAnswers);
+  const [flaggedUids, setFlaggedUids] = useState<Set<string>>(new Set());
+  const [materialsOpen, setMaterialsOpen] = useState(false);
+  const questionAreaRef = useRef<HTMLDivElement>(null);
+  const isFirstRender = useRef(true);
+
+  // Refs for stable callbacks
+  const questionsRef = useRef(questions);
+  questionsRef.current = questions;
+  const currentIndexRef = useRef(currentIndex);
+  currentIndexRef.current = currentIndex;
+  const onAnswerChangeRef = useRef(onAnswerChange);
+  onAnswerChangeRef.current = onAnswerChange;
+
+  const currentQuestion = questions[currentIndex];
+
+  // Focus question area on navigation (skip first render)
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    questionAreaRef.current?.focus();
+  }, [currentIndex]);
+
+  const currentQuestionAnswers = useMemo(
+    () =>
+      currentQuestion
+        ? sessionAnswers.filter((a) => a.uid === currentQuestion.uid)
+        : [],
+    [sessionAnswers, currentQuestion],
+  );
+
+  const currentMaterials = useMemo(
+    () => questionMaterials?.filter((m) => m.questionUid === currentQuestion?.uid) ?? [],
+    [questionMaterials, currentQuestion],
+  );
+
+  const navigatorItems = useMemo<QuestionNavigatorItem[]>(
+    () =>
+      questions.map((q, idx) => ({
+        uid: q.uid,
+        sequence: idx,
+        isFlagged: flaggedUids.has(q.uid),
+        isAnswered: sessionAnswers.some((a) => a.uid === q.uid),
+        isSkipped: false,
+      })),
+    [questions, sessionAnswers, flaggedUids],
+  );
+
+  const handleAnswer = useCallback(
+    (rawAnswers: { uid: string; content?: string }[]) => {
+      const q = questionsRef.current[currentIndexRef.current];
+      if (!q) return;
+      setSessionAnswers((prev) =>
+        mergeSessionAnswers(prev, q.uid, rawAnswers, onAnswerChangeRef.current),
+      );
+    },
+    [],
+  );
+
+  const handleNavigate = useCallback(
+    (uid: string) => {
+      const idx = questions.findIndex((q) => q.uid === uid);
+      if (idx !== -1) setCurrentIndex(idx);
+    },
+    [questions],
+  );
+
+  const handleToggleFlag = useCallback((uid: string) => {
+    setFlaggedUids((prev) => {
+      const next = new Set(prev);
+      if (next.has(uid)) next.delete(uid);
+      else next.add(uid);
+      return next;
+    });
+  }, []);
+
+  const goNext = useCallback(() => {
+    setCurrentIndex((i) => Math.min(i + 1, questionsRef.current.length - 1));
+  }, []);
+
+  const goPrevious = useCallback(() => {
+    setCurrentIndex((i) => Math.max(i - 1, 0));
+  }, []);
+
+  return {
+    currentIndex,
+    currentQuestion,
+    sessionAnswers,
+    flaggedUids,
+    materialsOpen,
+    setMaterialsOpen,
+    questionAreaRef,
+    currentQuestionAnswers,
+    currentMaterials,
+    navigatorItems,
+    handleAnswer,
+    handleNavigate,
+    handleToggleFlag,
+    goNext,
+    goPrevious,
+    hasNext: currentIndex < questions.length - 1,
+    hasPrevious: currentIndex > 0,
+  };
+}

package/src/sections/index.ts

@@ -87,4 +87,45 @@ export type {
 } from "./ProgressDashboard/types";
 
 export { CertificateViewer } from "./CertificateViewer/CertificateViewer";
-export type { CertificateViewerProps } from "./CertificateViewer/types";
+export type {
+  CertificateViewerProps,
+  CertificateVariant,
+} from "./CertificateViewer/types";
+
+export { RubricView } from "./RubricView/RubricView";
+export type {
+  RubricViewProps,
+  RubricCriterion,
+  RubricLevel,
+} from "./RubricView/types";
+
+export { RequirementsChecklist } from "./RequirementsChecklist/RequirementsChecklist";
+export type {
+  RequirementsChecklistProps,
+  Requirement,
+} from "./RequirementsChecklist/types";
+
+export { ForumBoard } from "./ForumBoard/ForumBoard";
+export type { ForumBoardProps, ForumTopic, ForumSortOrder } from "./ForumBoard/types";
+
+export { EnrollmentWizard } from "./EnrollmentWizard/EnrollmentWizard";
+export type {
+  EnrollmentWizardProps,
+  EnrollmentCourse,
+  Prerequisite,
+} from "./EnrollmentWizard/types";
+
+export { CourseCatalog } from "./CourseCatalog/CourseCatalog";
+export type {
+  CourseCatalogProps,
+  CourseInfo,
+} from "./CourseCatalog/types";
+
+export { StudentProfile } from "./StudentProfile/StudentProfile";
+export type {
+  StudentProfileProps,
+  StudentInfo,
+  EnrolledCourse,
+  ProfileAchievement,
+  ProfileCertificate,
+} from "./StudentProfile/types";

package/src/social/post-card.tsx

@@ -1,29 +1,17 @@
+import { memo } from "react";
 import { Pin } from "lucide-react";
 import { UserAvatar } from "./user-avatar";
 import { Separator } from "../ui/separator";
 import type { PostCardProps } 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";
 
 const HIGHLIGHT_BORDERS: Record<string, string> = {
   pinned: "var(--warning)",
   answer: "var(--success)",
 };
 
-export function PostCard({
+export const PostCard = memo(function PostCard({
   author,
   content,
   createdAt,
@@ -73,9 +61,10 @@ export function PostCard({
             )}
             {highlight === "pinned" && <Pin size={14} />}
           </div>
-          <p className="mt-1 text-sm whitespace-pre-wrap">
-            {content}
-          </p>
+          <div
+            className="mt-1 text-sm [&_p]:mb-1 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_a]:text-primary [&_a]:underline"
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
           {actions && (
             <>
               <Separator className="my-2" />
@@ -88,4 +77,4 @@ export function PostCard({
       </div>
     </div>
   );
-}
+});

package/src/social/user-avatar.tsx

@@ -13,7 +13,7 @@ const ROLE_LABELS: Record<string, string> = {
 
 const ROLE_COLORS: Record<string, string> = {
   instructor: "var(--primary)",
-  ta: "var(--purple)",
+  ta: "var(--palette-0)",
   admin: "var(--destructive)",
   student: "var(--muted-foreground)",
 };
@@ -59,6 +59,7 @@ export function UserAvatar({
             className="size-full object-cover"
             src={avatarUrl}
             alt={displayName}
+            loading="lazy"
             onError={() => setImgError(true)}
           />
         ) : (
@@ -66,10 +67,14 @@ export function UserAvatar({
         )}
       </div>
       {showBadge && (
-        <span
-          className="absolute -bottom-0.5 -right-0.5 size-2.5 rounded-full border-2 border-background"
-          style={{ background: ROLE_COLORS[role] ?? "var(--muted-foreground)" }}
-        />
+        <>
+          <span
+            className="absolute -bottom-0.5 -right-0.5 size-2.5 rounded-full border-2 border-background"
+            style={{ background: ROLE_COLORS[role] ?? "var(--muted-foreground)" }}
+            aria-hidden="true"
+          />
+          <span className="sr-only">{ROLE_LABELS[role] ?? role}</span>
+        </>
       )}
     </div>
   );

package/src/styles/globals.css

@@ -1,40 +1,10 @@
-@import "tailwindcss";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-info: var(--info);
-  --color-info-foreground: var(--info-foreground);
-  --color-purple: var(--purple);
-  --color-teal: var(--teal);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
+/*
+ * HydraLMS design tokens & base styles.
+ * NOTE: This file must NOT contain @import "tailwindcss" or Tailwind
+ * directives (@theme, @custom-variant). Those belong in the consumer's
+ * CSS entry point, which should also include an @source directive
+ * pointing to this library's source files. See the getting-started guide.
+ */
 
 .hydra-root {
   --radius: 0.625rem;
@@ -65,8 +35,16 @@
   --warning-foreground: oklch(0.98 0.016 73);
   --info: oklch(0.623 0.214 259);
   --info-foreground: oklch(0.97 0.014 254);
-  --purple: oklch(0.627 0.265 303);
-  --teal: oklch(0.697 0.146 182);
+
+  /* Palette colors for visual variety */
+  --palette-0: oklch(0.627 0.265 303);
+  --palette-0-foreground: oklch(0.985 0 0);
+  --palette-1: oklch(0.680 0.162 195);
+  --palette-1-foreground: oklch(0.985 0 0);
+  --palette-2: oklch(0.720 0.185 130);
+  --palette-2-foreground: oklch(0.985 0 0);
+  --palette-3: oklch(0.700 0.180 70);
+  --palette-3-foreground: oklch(0.15 0 0);
 
   color: var(--foreground);
   background: var(--background);
@@ -101,8 +79,16 @@
   --warning-foreground: oklch(0.15 0.05 60);
   --info: oklch(0.623 0.214 259);
   --info-foreground: oklch(0.15 0.05 255);
-  --purple: oklch(0.627 0.265 303);
-  --teal: oklch(0.697 0.146 182);
+
+  /* Palette colors for visual variety */
+  --palette-0: oklch(0.700 0.200 303);
+  --palette-0-foreground: oklch(0.15 0 0);
+  --palette-1: oklch(0.730 0.150 195);
+  --palette-1-foreground: oklch(0.15 0 0);
+  --palette-2: oklch(0.760 0.170 130);
+  --palette-2-foreground: oklch(0.15 0 0);
+  --palette-3: oklch(0.740 0.165 70);
+  --palette-3-foreground: oklch(0.15 0 0);
 }
 
 /* Rich text support for flashcard back content */
@@ -123,3 +109,28 @@
 .flashcard-back-content p {
   margin: 0.25em 0;
 }
+
+/* Tiptap rich text editor */
+.tiptap:focus {
+  outline: none;
+}
+
+.tiptap p.is-editor-empty:first-child::before {
+  color: var(--muted-foreground);
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+/* Respect user preference for reduced motion (WCAG 2.3.3) */
+@media (prefers-reduced-motion: reduce) {
+  .hydra-root *,
+  .hydra-root *::before,
+  .hydra-root *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/ui/badge.tsx

@@ -24,6 +24,14 @@ const badgeVariants = cva(
           "border-transparent bg-info/15 text-info",
         muted:
           "border-transparent bg-muted text-muted-foreground",
+        palette0:
+          "border-transparent bg-palette-0/15 text-palette-0",
+        palette1:
+          "border-transparent bg-palette-1/15 text-palette-1",
+        palette2:
+          "border-transparent bg-palette-2/15 text-palette-2",
+        palette3:
+          "border-transparent bg-palette-3/15 text-palette-3",
       },
     },
     defaultVariants: {