@hydralms/components 0.1.3 → 0.3.0

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>
+  );
+}

package/src/sections/StudentProfile/types.ts

@@ -0,0 +1,99 @@
+
+/**
+ * StudentProfile section — a student profile overview.
+ *
+ * Displays student info header, stat cards, enrolled courses list,
+ * achievements grid, and certificates list.
+ *
+ * @example
+ * <StudentProfile
+ *   student={{ uid: "s1", displayName: "Jane Doe", email: "jane@example.com" }}
+ *   enrolledCourses={courses}
+ *   achievements={badges}
+ *   onCourseClick={(uid) => navigate(`/courses/${uid}`)}
+ * />
+ */
+export interface StudentProfileProps {
+  /** Student information */
+  student: StudentInfo;
+  /** Enrolled courses */
+  enrolledCourses?: EnrolledCourse[];
+  /** Earned achievements */
+  achievements?: ProfileAchievement[];
+  /** Earned certificates */
+  certificates?: ProfileCertificate[];
+  /** Custom stat cards to display */
+  stats?: { label: string; value: string; icon?: React.ReactNode }[];
+  /** When false, hides the Enrolled Courses section. @default true */
+  showCourses?: boolean;
+  /** When false, hides the Achievements section. @default true */
+  showAchievements?: boolean;
+  /** Called when a course is clicked */
+  onCourseClick?: (courseUid: string) => void;
+  /** Called when a certificate is clicked */
+  onCertificateClick?: (certificateUid: string) => void;
+  /** 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;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}
+
+export interface StudentInfo {
+  /** Unique identifier */
+  uid: string;
+  /** Display name */
+  displayName: string;
+  /** Avatar URL */
+  avatarUrl?: string;
+  /** Email address */
+  email?: string;
+  /** Short bio */
+  bio?: string;
+  /** Join date as ISO string */
+  joinedAt?: string;
+  /** Role label */
+  role?: string;
+}
+
+export interface EnrolledCourse {
+  /** Course UID */
+  uid: string;
+  /** Course title */
+  title: string;
+  /** Progress percentage (0-100) */
+  progress: number;
+  /** Last accessed as ISO string */
+  lastAccessedAt?: string;
+}
+
+export interface ProfileAchievement {
+  /** Unique identifier */
+  uid: string;
+  /** Achievement name */
+  name: string;
+  /** Achievement description */
+  description: string;
+  /** Icon URL */
+  iconUrl?: string;
+  /** Date earned as ISO string */
+  earnedAt: string;
+}
+
+export interface ProfileCertificate {
+  /** Unique identifier */
+  uid: string;
+  /** Course name */
+  courseName: string;
+  /** Date issued as ISO string */
+  issuedAt: string;
+  /** Certificate URL */
+  certificateUrl?: string;
+}

package/src/sections/SurveyForm/SurveyForm.tsx

@@ -1,15 +1,19 @@
 import { useState, useMemo } from "react";
 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 { Skeleton } from "../../ui/skeleton";
+import { RichTextEditor } from "../../ui/rich-text-editor";
+import { SectionShell } from "../_shared/section-shell";
 import type { SurveyFormProps, SurveyAnswer } from "./types";
 
 export function SurveyForm({
   title,
   description,
-  questions,
+  questions = [],
   initialAnswers = [],
   onSubmit,
   onAnswerChange,
@@ -18,6 +22,9 @@ export function SurveyForm({
   submitLabel = "Submit Survey",
   isSubmitting = false,
   readOnly = false,
+  isLoading,
+  error,
+  onRetry,
   className,
   style,
 }: SurveyFormProps) {
@@ -39,11 +46,31 @@ export function SurveyForm({
     });
   }
 
-  function getAnswer(questionUid: string): SurveyAnswer | undefined {
-    return answers.find((a) => a.questionUid === questionUid);
-  }
+  const answerMap = useMemo(() => {
+    const map = new Map<string, SurveyAnswer>();
+    for (const a of answers) {
+      map.set(a.questionUid, a);
+    }
+    return map;
+  }, [answers]);
 
   return (
+    <SectionShell
+      isLoading={isLoading}
+      error={error}
+      onRetry={onRetry}
+      className={className}
+      style={style}
+      skeleton={
+        <>
+          <Skeleton className="h-6 w-48" />
+          <Skeleton className="h-2 w-full" />
+          <Skeleton className="h-16 w-full" />
+          <Skeleton className="h-16 w-full" />
+          <Skeleton className="h-16 w-full" />
+        </>
+      }
+    >
     <div className={className} style={style}>
       <p className="text-xl font-bold text-foreground mb-2">{title}</p>
       {description && (
@@ -65,7 +92,7 @@ export function SurveyForm({
       )}
 
       {questions.map((q, index) => {
-        const answer = getAnswer(q.uid);
+        const answer = answerMap.get(q.uid);
         return (
           <Card key={q.uid} className="mb-2"><CardContent className="pt-6">
             <p className="font-medium text-foreground mb-2">
@@ -95,12 +122,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 +192,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>
@@ -176,5 +205,6 @@ export function SurveyForm({
         </Button>
       </div>
     </div>
+    </SectionShell>
   );
 }

package/src/sections/SurveyForm/types.ts

@@ -38,6 +38,12 @@ export interface SurveyFormProps {
   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/_shared/merge-answers.ts

@@ -0,0 +1,22 @@
+import type { SessionAnswer } from "../../questions/types";
+
+/**
+ * Replaces all existing answers for `questionUid` with `rawAnswers`,
+ * then invokes an optional change callback with the merged array.
+ */
+export function mergeSessionAnswers(
+  prev: SessionAnswer[],
+  questionUid: string,
+  rawAnswers: { uid: string; content?: string }[],
+  onChange?: (merged: SessionAnswer[]) => void,
+): SessionAnswer[] {
+  const newAnswers: SessionAnswer[] = rawAnswers.map((a) => ({
+    uid: questionUid,
+    answerUid: a.uid,
+    content: a.content,
+  }));
+  const filtered = prev.filter((a) => a.uid !== questionUid);
+  const merged = [...filtered, ...newAnswers];
+  onChange?.(merged);
+  return merged;
+}

package/src/sections/_shared/section-shell.tsx

@@ -0,0 +1,64 @@
+import type { ReactNode } from "react";
+import { AlertCircle } from "lucide-react";
+import { EmptyState } from "../../common";
+import { Button } from "../../ui/button";
+import { cn } from "../../lib/utils";
+
+export interface SectionShellProps {
+  isLoading?: boolean;
+  error?: string | null;
+  onRetry?: () => void;
+  /** Skeleton placeholder rendered when `isLoading` is true. */
+  skeleton?: ReactNode;
+  /** Extra class merged into the loading wrapper (default `"space-y-4"`). */
+  loadingClassName?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  children: ReactNode;
+}
+
+/**
+ * Shared wrapper that handles loading skeleton and error states
+ * so individual sections don't repeat the same early-return blocks.
+ *
+ * When neither loading nor error, renders children directly (no extra wrapper).
+ */
+export function SectionShell({
+  isLoading,
+  error,
+  onRetry,
+  skeleton,
+  loadingClassName = "space-y-4",
+  className,
+  style,
+  children,
+}: SectionShellProps) {
+  if (isLoading) {
+    return (
+      <div className={cn(loadingClassName, className)} style={style}>
+        {skeleton}
+      </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 <>{children}</>;
+}