@hydralms/components 0.1.1 → 0.1.3

package/src/sections/SurveyForm/types.ts

@@ -0,0 +1,69 @@
+import type { ReactNode } from "react";
+import type { AnswerOption } from "../../questions/types";
+
+/**
+ * SurveyForm section — an ungraded survey/feedback form.
+ *
+ * Supports Likert scale, star rating, open-text, single-choice,
+ * and multiple-choice question types. Questions can be displayed
+ * all at once or one at a time.
+ *
+ * @example
+ * <SurveyForm
+ *   title="Course Evaluation"
+ *   questions={surveyQuestions}
+ *   onSubmit={(answers) => submitSurvey(answers)}
+ * />
+ */
+export interface SurveyFormProps {
+  /** Survey title displayed at the top */
+  title: string;
+  /** Optional introductory text or description */
+  description?: ReactNode;
+  /** Survey questions */
+  questions: SurveyQuestion[];
+  /** Pre-populated answers */
+  initialAnswers?: SurveyAnswer[];
+  /** Called on submission with all answers */
+  onSubmit: (answers: SurveyAnswer[]) => void;
+  /** Called whenever any answer changes */
+  onAnswerChange?: (answers: SurveyAnswer[]) => void;
+  /** Whether to show a progress indicator */
+  showProgress?: boolean;
+  /** Whether all questions must be answered before submit */
+  requireAll?: boolean;
+  /** Label for the submit button */
+  submitLabel?: string;
+  /** Whether the submit action is in flight */
+  isSubmitting?: boolean;
+  /** When true, all inputs are disabled */
+  readOnly?: boolean;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}
+
+export interface SurveyQuestion {
+  /** Unique identifier */
+  uid: string;
+  /** Question type */
+  type: "likert" | "rating" | "open_text" | "choice" | "multiple_choice";
+  /** Question text */
+  content: string;
+  /** For likert: labels for scale endpoints */
+  scaleLabels?: { low: string; high: string };
+  /** For likert: number of scale points */
+  scalePoints?: 5 | 7;
+  /** For choice/multiple_choice: answer options */
+  answers?: AnswerOption[];
+  /** Whether this question is required */
+  required?: boolean;
+}
+
+export interface SurveyAnswer {
+  /** Question UID */
+  questionUid: string;
+  /** Answer value — string for text, number for likert/rating, uid for choice */
+  value: string | number;
+}

package/src/sections/index.ts

@@ -0,0 +1,90 @@
+export { QuizSession } from "./QuizSession/QuizSession";
+export type { QuizSessionProps } from "./QuizSession/types";
+
+export { LecturePlayer } from "./LecturePlayer/LecturePlayer";
+export type { LecturePlayerProps } from "./LecturePlayer/types";
+
+export { FlashcardStudySession } from "./FlashcardStudySession/FlashcardStudySession";
+export type {
+  FlashcardStudySessionProps,
+  FlashcardSessionStats,
+} from "./FlashcardStudySession/types";
+
+export { AssessmentReview } from "./AssessmentReview/AssessmentReview";
+export type {
+  AssessmentReviewProps,
+  AssessmentScore,
+  AssessmentReviewGroup,
+} from "./AssessmentReview/types";
+
+export { CourseOutline } from "./CourseOutline/CourseOutline";
+export type { CourseOutlineProps } from "./CourseOutline/types";
+
+export { ScrollableQuiz } from "./ScrollableQuiz/ScrollableQuiz";
+export type { ScrollableQuizProps } from "./ScrollableQuiz/types";
+
+export { PracticeQuiz } from "./PracticeQuiz/PracticeQuiz";
+export type {
+  PracticeQuizProps,
+  PracticeQuizStats,
+} from "./PracticeQuiz/types";
+
+export { ExamSession } from "./ExamSession/ExamSession";
+export type {
+  ExamSessionProps,
+  ExamSubmitMetadata,
+} from "./ExamSession/types";
+
+export { SurveyForm } from "./SurveyForm/SurveyForm";
+export type {
+  SurveyFormProps,
+  SurveyQuestion,
+  SurveyAnswer,
+} from "./SurveyForm/types";
+
+export { LessonPage } from "./LessonPage/LessonPage";
+export type { LessonPageProps } from "./LessonPage/types";
+
+export { ResourceLibrary } from "./ResourceLibrary/ResourceLibrary";
+export type {
+  ResourceLibraryProps,
+  Resource,
+} from "./ResourceLibrary/types";
+
+export { AnnouncementFeed } from "./AnnouncementFeed/AnnouncementFeed";
+export type {
+  AnnouncementFeedProps,
+  Announcement,
+} from "./AnnouncementFeed/types";
+
+export { DiscussionThread } from "./DiscussionThread/DiscussionThread";
+export type {
+  DiscussionThreadProps,
+  DiscussionPost,
+  DiscussionUser,
+} from "./DiscussionThread/types";
+
+export { AssignmentSubmission } from "./AssignmentSubmission/AssignmentSubmission";
+export type {
+  AssignmentSubmissionProps,
+  SubmissionData,
+} from "./AssignmentSubmission/types";
+
+export { GradebookTable } from "./GradebookTable/GradebookTable";
+export type {
+  GradebookTableProps,
+  GradeItem,
+  GradeCategory,
+  OverallGrade,
+} from "./GradebookTable/types";
+
+export { ProgressDashboard } from "./ProgressDashboard/ProgressDashboard";
+export type {
+  ProgressDashboardProps,
+  ModuleProgress,
+  ActivityItem,
+  Achievement,
+} from "./ProgressDashboard/types";
+
+export { CertificateViewer } from "./CertificateViewer/CertificateViewer";
+export type { CertificateViewerProps } from "./CertificateViewer/types";

package/src/social/index.ts

@@ -0,0 +1,3 @@
+export { UserAvatar } from "./user-avatar";
+export { PostCard } from "./post-card";
+export type { UserAvatarProps, PostCardProps } from "./types";

package/src/social/post-card.tsx

@@ -0,0 +1,91 @@
+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();
+}
+
+const HIGHLIGHT_BORDERS: Record<string, string> = {
+  pinned: "var(--warning)",
+  answer: "var(--success)",
+};
+
+export function PostCard({
+  author,
+  content,
+  createdAt,
+  updatedAt,
+  actions,
+  highlight = "none",
+  indentLevel = 0,
+  className,
+  style,
+}: PostCardProps) {
+  const borderColor = HIGHLIGHT_BORDERS[highlight];
+
+  return (
+    <div
+      className={cn("rounded-md border border-border p-3", className)}
+      style={{
+        marginLeft: indentLevel ? `calc(${indentLevel} * 1rem)` : undefined,
+        ...(borderColor && {
+          borderLeftWidth: "3px",
+          borderLeftColor: borderColor,
+        }),
+        ...style,
+      }}
+    >
+      <div className="flex gap-2">
+        <UserAvatar
+          displayName={author.displayName}
+          avatarUrl={author.avatarUrl}
+          role={author.role as "student" | "instructor" | "ta" | "admin" | undefined}
+          size="medium"
+        />
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-1.5 flex-wrap text-sm">
+            <span className="font-semibold">{author.displayName}</span>
+            {author.role && author.role !== "student" && (
+              <span className="rounded-full bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary capitalize">
+                {author.role}
+              </span>
+            )}
+            <span className="text-xs text-muted-foreground">
+              {formatTimestamp(createdAt)}
+            </span>
+            {updatedAt && (
+              <span className="text-xs text-muted-foreground italic">
+                (edited)
+              </span>
+            )}
+            {highlight === "pinned" && <Pin size={14} />}
+          </div>
+          <p className="mt-1 text-sm whitespace-pre-wrap">
+            {content}
+          </p>
+          {actions && (
+            <>
+              <Separator className="my-2" />
+              <div className="flex items-center gap-1">
+                {actions}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/social/types.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+
+/**
+ * UserAvatar renders a user avatar image with an initials fallback
+ * and an optional role badge.
+ *
+ * @example
+ * <UserAvatar displayName="Jane Smith" role="instructor" />
+ */
+export interface UserAvatarProps {
+  /** User's display name (used for initials fallback) */
+  displayName: string;
+  /** URL of the avatar image */
+  avatarUrl?: string;
+  /** User role — shown as a tooltip or small badge */
+  role?: "student" | "instructor" | "ta" | "admin";
+  /** Whether to show the role badge */
+  showRoleBadge?: boolean;
+  /** Avatar size */
+  size?: "small" | "medium" | "large";
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}
+
+/**
+ * PostCard renders a single discussion post or announcement with author info,
+ * timestamp, content body, and optional action buttons.
+ *
+ * @example
+ * <PostCard
+ *   author={{ displayName: "Jane Smith", role: "instructor" }}
+ *   content="Welcome to the course!"
+ *   createdAt="2025-01-15T10:30:00Z"
+ * />
+ */
+export interface PostCardProps {
+  /** Post author information */
+  author: { displayName: string; avatarUrl?: string; role?: string };
+  /** Post body content */
+  content: string;
+  /** Creation timestamp as ISO string */
+  createdAt: string;
+  /** Last update timestamp */
+  updatedAt?: string;
+  /** Action buttons rendered in the card footer */
+  actions?: ReactNode;
+  /** Highlight variant for special posts */
+  highlight?: "pinned" | "answer" | "none";
+  /** Indentation level for nested replies */
+  indentLevel?: number;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}

package/src/social/user-avatar.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import type { UserAvatarProps } from "./types";
+import { cn } from "../lib/utils";
+
+const SIZES = { small: 28, medium: 36, large: 48 };
+
+const ROLE_LABELS: Record<string, string> = {
+  student: "Student",
+  instructor: "Instructor",
+  ta: "Teaching Assistant",
+  admin: "Admin",
+};
+
+const ROLE_COLORS: Record<string, string> = {
+  instructor: "var(--primary)",
+  ta: "var(--purple)",
+  admin: "var(--destructive)",
+  student: "var(--muted-foreground)",
+};
+
+function getInitials(name: string): string {
+  return name
+    .split(" ")
+    .filter(Boolean)
+    .map((w) => w[0])
+    .slice(0, 2)
+    .join("")
+    .toUpperCase();
+}
+
+export function UserAvatar({
+  displayName,
+  avatarUrl,
+  role,
+  showRoleBadge = false,
+  size = "medium",
+  className,
+  style,
+}: UserAvatarProps) {
+  const px = SIZES[size];
+  const fontSize = px * 0.4;
+  const [imgError, setImgError] = useState(false);
+
+  const showBadge = showRoleBadge && role && role !== "student";
+  const title = showBadge ? ROLE_LABELS[role] ?? role : undefined;
+
+  return (
+    <div
+      className={cn("relative inline-flex", className)}
+      style={style}
+      title={title}
+    >
+      <div
+        className="flex items-center justify-center rounded-full bg-muted text-muted-foreground overflow-hidden"
+        style={{ width: `${px}px`, height: `${px}px`, fontSize: `${fontSize}px` }}
+      >
+        {avatarUrl && !imgError ? (
+          <img
+            className="size-full object-cover"
+            src={avatarUrl}
+            alt={displayName}
+            onError={() => setImgError(true)}
+          />
+        ) : (
+          <span>{getInitials(displayName)}</span>
+        )}
+      </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)" }}
+        />
+      )}
+    </div>
+  );
+}

package/src/styles/globals.css

@@ -0,0 +1,125 @@
+@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);
+}
+
+.hydra-root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.52 0.22 22);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.961 0.01 22);
+  --secondary-foreground: oklch(0.4 0.12 22);
+  --muted: oklch(0.961 0.005 22);
+  --muted-foreground: oklch(0.5 0.02 22);
+  --accent: oklch(0.952 0.012 22);
+  --accent-foreground: oklch(0.4 0.12 22);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.905 0.008 22);
+  --input: oklch(0.905 0.008 22);
+  --ring: oklch(0.52 0.22 22);
+
+  /* LMS feedback colors */
+  --success: oklch(0.723 0.191 142.5);
+  --success-foreground: oklch(0.962 0.044 156);
+  --warning: oklch(0.702 0.183 55);
+  --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);
+
+  color: var(--foreground);
+  background: var(--background);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.hydra-root.dark,
+.dark .hydra-root {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0.008 22);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0.008 22);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.68 0.20 22);
+  --primary-foreground: oklch(0.145 0 0);
+  --secondary: oklch(0.269 0.015 22);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0.015 22);
+  --muted-foreground: oklch(0.65 0.02 22);
+  --accent: oklch(0.269 0.015 22);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.145 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.68 0.20 22);
+
+  --success: oklch(0.723 0.191 142.5);
+  --success-foreground: oklch(0.15 0.05 150);
+  --warning: oklch(0.702 0.183 55);
+  --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);
+}
+
+/* Rich text support for flashcard back content */
+.flashcard-back-content ul,
+.flashcard-back-content ol {
+  padding-left: 1.25em;
+  margin: 0.25em 0;
+}
+.flashcard-back-content ul {
+  list-style-type: disc;
+}
+.flashcard-back-content ol {
+  list-style-type: decimal;
+}
+.flashcard-back-content li {
+  margin: 0.15em 0;
+}
+.flashcard-back-content p {
+  margin: 0.25em 0;
+}