@hydralms/components 0.1.3 → 0.2.0

package/src/sections/RubricView/types.ts

@@ -0,0 +1,52 @@
+/**
+ * RubricView section — displays a grading rubric with criteria and proficiency levels.
+ *
+ * Shows criteria as rows with level columns. When `selectedLevels` is provided,
+ * highlights the scored level per criterion and shows total score.
+ *
+ * @example
+ * <RubricView
+ *   criteria={rubricCriteria}
+ *   selectedLevels={{ "c1": "l2", "c2": "l3" }}
+ *   totalScore={85}
+ *   maxScore={100}
+ * />
+ */
+export interface RubricViewProps {
+  /** Rubric criteria (rows) */
+  criteria: RubricCriterion[];
+  /** Selected level UID per criterion UID — highlights scored cells */
+  selectedLevels?: Record<string, string>;
+  /** Overall rubric score (sum of selected levels) */
+  totalScore?: number;
+  /** Maximum possible score */
+  maxScore?: number;
+  /** Instructor feedback text */
+  feedback?: string;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}
+
+export interface RubricCriterion {
+  /** Unique identifier */
+  uid: string;
+  /** Criterion name (e.g. "Organization", "Evidence") */
+  name: string;
+  /** Optional description of what this criterion evaluates */
+  description?: string;
+  /** Proficiency levels from lowest to highest */
+  levels: RubricLevel[];
+}
+
+export interface RubricLevel {
+  /** Unique identifier */
+  uid: string;
+  /** Level label (e.g. "Excellent", "Good", "Needs Work") */
+  label: string;
+  /** Description of what this level looks like */
+  description: string;
+  /** Point value for this level */
+  points: number;
+}

package/src/sections/ScrollableQuiz/ScrollableQuiz.tsx

@@ -3,6 +3,7 @@ import { QuestionRenderer } from "../../questions";
 import type { SessionAnswer } from "../../questions/types";
 import { Button } from "../../ui/button";
 import { Card, CardContent } from "../../ui/card";
+import { Separator } from "../../ui/separator";
 import { cn } from "../../lib/utils";
 import type { ScrollableQuizProps } from "./types";
 
@@ -23,10 +24,20 @@ export function ScrollableQuiz({
   const [activeUid, setActiveUid] = useState<string | null>(questions[0]?.uid ?? null);
   const questionRefs = useRef<Map<string, HTMLElement>>(new Map());
 
-  const answeredCount = useMemo(() => {
-    const answered = new Set(sessionAnswers.map((a) => a.uid));
-    return questions.filter((q) => answered.has(q.uid)).length;
-  }, [questions, sessionAnswers]);
+  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]);
+
+  const answeredCount = useMemo(
+    () => questions.filter((q) => answersByQuestion.has(q.uid)).length,
+    [questions, answersByQuestion],
+  );
 
   useEffect(() => {
     const observer = new IntersectionObserver(
@@ -90,7 +101,7 @@ export function ScrollableQuiz({
       {/* Main content */}
       <div className="flex-1 min-w-0">
         {orderedQuestions.map((group, gi) => (
-          <div key={gi}>
+          <div key={group.label ?? `ungrouped-${gi}`}>
             {group.label && (
               <p className={cn("text-lg font-semibold mb-2 text-foreground", gi > 0 && "mt-4")}>
                 {group.label}
@@ -113,7 +124,7 @@ export function ScrollableQuiz({
                     )}
                     <QuestionRenderer
                       question={q}
-                      sessionAnswers={sessionAnswers.filter((a) => a.uid === q.uid)}
+                      sessionAnswers={answersByQuestion.get(q.uid) ?? []}
                       onAnswer={(answers) => handleAnswer(q.uid, answers)}
                       readOnly={readOnly}
                     />
@@ -123,7 +134,8 @@ export function ScrollableQuiz({
             })}
           </div>
         ))}
-        <div className="mt-3 flex justify-between items-center">
+        <Separator className="my-3" />
+        <div className="flex justify-between items-center">
           <span className="text-sm text-muted-foreground">
             {answeredCount} of {questions.length} answered
           </span>
@@ -138,11 +150,12 @@ export function ScrollableQuiz({
 
       {/* Sidebar navigator */}
       {showNavigator && (
-        <Card className="hidden md:block w-50 shrink-0 sticky top-4 self-start p-3">
+        <Card className="hidden md:block w-50 shrink-0 sticky top-4 self-start">
+          <CardContent className="p-3">
           <p className="font-semibold text-sm mb-1 text-foreground">Questions</p>
           <div className="flex flex-wrap gap-1">
             {questions.map((q, i) => {
-              const isAnswered = sessionAnswers.some((a) => a.uid === q.uid);
+              const isAnswered = answersByQuestion.has(q.uid);
               const isActive = activeUid === q.uid;
               return (
                 <button
@@ -163,6 +176,7 @@ export function ScrollableQuiz({
               );
             })}
           </div>
+          </CardContent>
         </Card>
       )}
     </div>

package/src/sections/SurveyForm/SurveyForm.tsx

@@ -3,7 +3,8 @@ import { LikertScale, StarRating } from "../../feedback";
 import { Button } from "../../ui/button";
 import { Card, CardContent } from "../../ui/card";
 import { Progress } from "../../ui/progress";
-import { Textarea } from "../../ui/textarea";
+import { Separator } from "../../ui/separator";
+import { RichTextEditor } from "../../ui/rich-text-editor";
 import type { SurveyFormProps, SurveyAnswer } from "./types";
 
 export function SurveyForm({
@@ -95,12 +96,13 @@ export function SurveyForm({
             )}
 
             {q.type === "open_text" && (
-              <Textarea
+              <RichTextEditor
                 placeholder="Type your response..."
                 value={(answer?.value as string) ?? ""}
-                onChange={(e) => setAnswer(q.uid, e.target.value)}
-                disabled={readOnly}
+                onChange={(html) => setAnswer(q.uid, html)}
+                readOnly={readOnly}
                 className="min-h-24"
+                variant="minimal"
               />
             )}
 
@@ -164,7 +166,8 @@ export function SurveyForm({
         );
       })}
 
-      <div className="flex justify-between items-center mt-3">
+      <Separator className="my-3" />
+      <div className="flex justify-between items-center">
         <span className="text-sm text-muted-foreground">
           {answeredCount} of {questions.length} answered
         </span>

package/src/sections/index.ts

@@ -87,4 +87,23 @@ 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";

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

@@ -59,6 +59,7 @@ export function UserAvatar({
             className="size-full object-cover"
             src={avatarUrl}
             alt={displayName}
+            loading="lazy"
             onError={() => setImgError(true)}
           />
         ) : (

package/src/styles/globals.css

@@ -123,3 +123,16 @@
 .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;
+}