@hydralms/components 0.1.3 → 0.2.0

package/src/content/index.ts

@@ -1,7 +1,10 @@
 export { ContentBlock } from "./content-block";
 export { FileUploadZone } from "./file-upload-zone";
+export { AttachmentList } from "./attachment-list";
 export type {
   LessonBlock,
   ContentBlockProps,
   FileUploadZoneProps,
+  AttachmentListProps,
+  AttachmentFile,
 } from "./types";

package/src/content/types.ts

@@ -74,3 +74,44 @@ export interface FileUploadZoneProps {
   /** Inline styles for the root element */
   style?: React.CSSProperties;
 }
+
+/**
+ * A single file attachment for display in AttachmentList.
+ */
+export interface AttachmentFile {
+  /** File name with extension */
+  name: string;
+  /** File size in bytes */
+  size: number;
+  /** MIME type (e.g. "application/pdf", "image/png") */
+  type: string;
+  /** Optional download URL */
+  url?: string;
+}
+
+/**
+ * AttachmentList displays a read-only list of file attachments
+ * with type icons, formatted sizes, and optional download/remove actions.
+ *
+ * @example
+ * <AttachmentList
+ *   files={[
+ *     { name: "syllabus.pdf", size: 245000, type: "application/pdf", url: "/files/syllabus.pdf" },
+ *   ]}
+ *   onDownload={(file) => window.open(file.url)}
+ * />
+ */
+export interface AttachmentListProps {
+  /** List of file attachments to display */
+  files: AttachmentFile[];
+  /** Called when the user clicks a file's download action */
+  onDownload?: (file: AttachmentFile) => void;
+  /** Called when the user clicks a file's remove button (only shown when not readOnly) */
+  onRemove?: (file: AttachmentFile) => void;
+  /** When true, hides the remove button. @default true */
+  readOnly?: boolean;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}

package/src/curriculum/curriculum-item.tsx

@@ -1,10 +1,11 @@
+import { memo } from "react";
 import { ChevronRight, ChevronDown, CheckCircle2, Circle } from "lucide-react";
 import { LearningObjectIcon } from "./learning-object-icon";
 import { formatDuration } from "../utils/format-duration";
 import type { CurriculumItemRowProps } from "./types";
 import { cn } from "../lib/utils";
 
-export const CurriculumItemRow = ({
+export const CurriculumItemRow = memo(function CurriculumItemRow({
   item,
   level,
   isActive = false,
@@ -16,7 +17,7 @@ export const CurriculumItemRow = ({
   showDuration = true,
   showIcon = true,
   showProgress = true,
-}: CurriculumItemRowProps) => {
+}: CurriculumItemRowProps) {
   const isModule = hasChildren;
 
   const fontWeightClass = isModule ? "font-semibold" : isActive ? "font-medium" : "font-normal";
@@ -30,6 +31,9 @@ export const CurriculumItemRow = ({
       )}
       style={{ paddingLeft: `${(level * 20) + 8}px` }}
       onClick={onClick}
+      role={onClick ? "button" : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onKeyDown={onClick ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(); } } : undefined}
     >
       <div className="shrink-0 flex items-center justify-center size-5">
         {showProgress && isCompleted ? (
@@ -78,4 +82,4 @@ export const CurriculumItemRow = ({
       )}
     </div>
   );
-};
+});

package/src/feedback/feedback-banner.tsx

@@ -1,4 +1,6 @@
 import { CheckCircle, XCircle } from "lucide-react";
+import { Alert } from "../ui/alert";
+import { Button } from "../ui/button";
 import type { FeedbackBannerProps } from "./types";
 import { cn } from "../lib/utils";
 
@@ -11,18 +13,12 @@ export function FeedbackBanner({
   style,
 }: FeedbackBannerProps) {
   return (
-    <div
-      role="alert"
-      className={cn(
-        "flex items-start gap-2 rounded-md border p-3 text-sm",
-        isCorrect
-          ? "border-success/50 bg-success/5"
-          : "border-destructive/50 bg-destructive/5",
-        className,
-      )}
+    <Alert
+      variant={isCorrect ? "success" : "destructive"}
+      className={cn(className)}
       style={style}
     >
-      <span className={cn("shrink-0", isCorrect ? "text-success" : "text-destructive")}>
+      <span className="shrink-0">
         {isCorrect ? <CheckCircle size={20} /> : <XCircle size={20} />}
       </span>
       <div className="flex-1">
@@ -32,15 +28,17 @@ export function FeedbackBanner({
             {explanation && <p className="mt-1 text-foreground">{explanation}</p>}
           </div>
           {!isCorrect && onRetry && (
-            <button
-              className="shrink-0 rounded-md border border-border bg-background px-3 py-1 text-sm font-medium transition-colors hover:bg-muted"
+            <Button
+              variant="outline"
+              size="sm"
+              className="shrink-0"
               onClick={onRetry}
             >
               {retryLabel}
-            </button>
+            </Button>
           )}
         </div>
       </div>
-    </div>
+    </Alert>
   );
 }

package/src/flashcards/flashcard-deck.tsx

@@ -3,15 +3,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Flashcard } from "./flashcard";
 import { Button } from "../ui/button";
 import type { FlashcardDeckProps } from "./types";
-
-function shuffle<T>(array: T[]): T[] {
-  const shuffled = [...array];
-  for (let i = shuffled.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
-  }
-  return shuffled;
-}
+import { shuffle } from "../utils/shuffle";
 
 export const FlashcardDeck = ({
   cards,

package/src/flashcards/flashcard.tsx

@@ -50,7 +50,7 @@ export const Flashcard = ({
     >
       <div
         className={cn(
-          "relative size-full transition-transform duration-500 transform-3d",
+          "relative size-full motion-safe:transition-transform motion-safe:duration-500 transform-3d",
           isFlipped && "transform-[rotateY(180deg)]",
         )}
       >

package/src/modules/AssignmentModule/AssignmentModule.tsx

@@ -0,0 +1,305 @@
+import { useState, useRef, useEffect, useMemo } from "react";
+import {
+  FileEdit,
+  CheckCircle2,
+  Play,
+  ArrowLeft,
+  FileText,
+  Link as LinkIcon,
+  Paperclip,
+} from "lucide-react";
+import { AssignmentSubmission } from "../../sections/AssignmentSubmission/AssignmentSubmission";
+import { RubricView } from "../../sections/RubricView/RubricView";
+import { GradeIndicator } from "../../progress/grade-indicator";
+import { StatusBadge } from "../../common/status-badge";
+import { DueDateDisplay } from "../../common/due-date-display";
+import { Button } from "../../ui/button";
+import { Badge } from "../../ui/badge";
+import { Card, CardContent } from "../../ui/card";
+import { Alert, AlertDescription } from "../../ui/alert";
+import { Separator } from "../../ui/separator";
+import { cn } from "../../lib/utils";
+import type { SubmissionData } from "../../sections/AssignmentSubmission/types";
+import type { AssignmentModuleProps } from "./types";
+
+type InternalStep =
+  | { tag: "instructions" }
+  | { tag: "work" }
+  | { tag: "confirmation"; submission: SubmissionData };
+
+const TYPE_LABELS: Record<string, string> = {
+  text: "Text Entry",
+  file: "File Upload",
+  url: "URL Submission",
+};
+
+/**
+ * AssignmentModule — a complete assignment experience with instructions,
+ * submission work area, and confirmation/grade review.
+ *
+ * Steps: Instructions → Work (AssignmentSubmission) → Confirmation.
+ */
+export function AssignmentModule({
+  title,
+  instructions,
+  dueDate,
+  maxScore,
+  submissionTypes,
+  fileConstraints,
+  rubric,
+  existingSubmission,
+  status = "not_started",
+  grade,
+  onSubmit,
+  onSaveDraft,
+  className,
+  style,
+}: AssignmentModuleProps) {
+  const initialStep: InternalStep =
+    status === "submitted" || status === "graded"
+      ? {
+          tag: "confirmation",
+          submission: existingSubmission ?? {},
+        }
+      : { tag: "instructions" };
+
+  const [step, setStep] = useState<InternalStep>(initialStep);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    contentRef.current?.focus({ preventScroll: true });
+  }, [step.tag]);
+
+  const rubricMaxScore = useMemo(() => {
+    if (!rubric) return 0;
+    return rubric.reduce(
+      (sum, c) => sum + Math.max(...c.levels.map((l) => l.points)),
+      0
+    );
+  }, [rubric]);
+
+  function handleSubmit(submission: SubmissionData) {
+    onSubmit?.(submission);
+    setStep({ tag: "confirmation", submission });
+  }
+
+  function handleSaveDraft(submission: SubmissionData) {
+    onSaveDraft?.(submission);
+  }
+
+  const canEdit =
+    status === "not_started" ||
+    status === "draft" ||
+    status === "resubmit";
+
+  // ─── Instructions Screen ───
+  if (step.tag === "instructions") {
+    return (
+      <div
+        ref={contentRef}
+        tabIndex={-1}
+        className={cn("max-w-2xl mx-auto outline-none", className)}
+        style={style}
+      >
+        <Card>
+          <CardContent className="pt-8 pb-8">
+            <div className="text-center mb-6">
+              <div className="mx-auto mb-4 w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center">
+                <FileEdit className="size-7 text-primary" />
+              </div>
+              <h2 className="text-2xl font-bold text-foreground mb-2">
+                {title}
+              </h2>
+            </div>
+
+            {/* Metadata chips */}
+            <div className="flex flex-wrap justify-center gap-2 mb-6">
+              {dueDate && (
+                <DueDateDisplay dueDate={dueDate} size="small" />
+              )}
+              {maxScore !== undefined && (
+                <Badge variant="outline" className="gap-1.5">
+                  <CheckCircle2 className="size-3.5" />
+                  {maxScore} points
+                </Badge>
+              )}
+              <Badge variant="outline" className="gap-1.5">
+                <Paperclip className="size-3.5" />
+                {submissionTypes.map((t) => TYPE_LABELS[t]).join(", ")}
+              </Badge>
+              <StatusBadge status={status} />
+            </div>
+
+            <Separator className="my-6" />
+
+            {/* Instructions content */}
+            <div className="prose prose-sm text-foreground mb-6">
+              {instructions}
+            </div>
+
+            {/* Rubric preview */}
+            {rubric && rubric.length > 0 && (
+              <>
+                <Separator className="my-6" />
+                <RubricView
+                  criteria={rubric}
+                  maxScore={rubricMaxScore}
+                />
+              </>
+            )}
+
+            {/* Action */}
+            {canEdit && (
+              <div className="text-center mt-8">
+                <Button
+                  size="lg"
+                  onClick={() => setStep({ tag: "work" })}
+                >
+                  <Play className="size-4 mr-2" />
+                  Start Assignment
+                </Button>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  // ─── Work Screen ───
+  if (step.tag === "work") {
+    return (
+      <div
+        ref={contentRef}
+        tabIndex={-1}
+        className={cn("outline-none", className)}
+        style={style}
+      >
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setStep({ tag: "instructions" })}
+          className="mb-4"
+        >
+          <ArrowLeft className="size-4 mr-1.5" />
+          Back to Instructions
+        </Button>
+        <AssignmentSubmission
+          title={title}
+          instructions={instructions}
+          dueDate={dueDate}
+          maxScore={maxScore}
+          status={status}
+          submissionTypes={submissionTypes}
+          existingSubmission={existingSubmission}
+          fileConstraints={fileConstraints}
+          grade={grade}
+          onSubmit={handleSubmit}
+          onSaveDraft={handleSaveDraft}
+        />
+      </div>
+    );
+  }
+
+  // ─── Confirmation Screen ───
+  const { submission } = step;
+
+  return (
+    <div
+      ref={contentRef}
+      tabIndex={-1}
+      className={cn("max-w-2xl mx-auto outline-none", className)}
+      style={style}
+    >
+      <Card>
+        <CardContent className="pt-8 pb-8">
+          <div className="text-center mb-6">
+            <div className="mx-auto mb-4 w-14 h-14 rounded-full bg-success/10 flex items-center justify-center">
+              <CheckCircle2 className="size-7 text-success" />
+            </div>
+            <h2 className="text-xl font-bold text-foreground mb-2">
+              {status === "graded" ? "Assignment Graded" : "Submission Received"}
+            </h2>
+            <div className="flex justify-center gap-2 mb-4">
+              <StatusBadge status={status} />
+              {dueDate && <DueDateDisplay dueDate={dueDate} size="small" />}
+            </div>
+          </div>
+
+          {/* Grade display */}
+          {status === "graded" && grade && (
+            <div className="text-center mb-6">
+              <GradeIndicator
+                percentage={
+                  maxScore ? Math.round((grade.score / maxScore) * 100) : 0
+                }
+                size="large"
+              />
+              <p className="text-sm text-muted-foreground mt-2">
+                {grade.score}/{maxScore} points
+              </p>
+              {grade.feedback && (
+                <Alert className="text-left mt-4">
+                  <AlertDescription>{grade.feedback}</AlertDescription>
+                </Alert>
+              )}
+              {rubric && grade.rubricLevels && (
+                <>
+                  <Separator className="my-6" />
+                  <RubricView
+                    criteria={rubric}
+                    selectedLevels={grade.rubricLevels}
+                    totalScore={grade.score}
+                    maxScore={rubricMaxScore}
+                  />
+                </>
+              )}
+            </div>
+          )}
+
+          {/* Submission summary */}
+          <Separator className="my-6" />
+          <h3 className="text-sm font-semibold text-foreground mb-3">
+            What You Submitted
+          </h3>
+          <div className="space-y-2 text-sm text-muted-foreground">
+            {submission.textContent && (
+              <div className="flex items-start gap-2">
+                <FileText className="size-4 mt-0.5 shrink-0" />
+                <span className="line-clamp-2">{submission.textContent}</span>
+              </div>
+            )}
+            {submission.files && submission.files.length > 0 && (
+              <div className="flex items-start gap-2">
+                <Paperclip className="size-4 mt-0.5 shrink-0" />
+                <span>
+                  {submission.files.length} file
+                  {submission.files.length !== 1 ? "s" : ""} uploaded
+                </span>
+              </div>
+            )}
+            {submission.url && (
+              <div className="flex items-start gap-2">
+                <LinkIcon className="size-4 mt-0.5 shrink-0" />
+                <span className="truncate">{submission.url}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Edit button */}
+          {canEdit && (
+            <div className="text-center mt-8">
+              <Button
+                variant="outline"
+                onClick={() => setStep({ tag: "work" })}
+              >
+                <FileEdit className="size-4 mr-2" />
+                Edit Submission
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/modules/AssignmentModule/types.ts

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+import type { SubmissionData } from "../../sections/AssignmentSubmission/types";
+import type { RubricCriterion } from "../../sections/RubricView/types";
+
+/**
+ * AssignmentModule — a complete assignment experience with instructions,
+ * submission, and confirmation/grade review.
+ *
+ * Steps: Instructions → Work (AssignmentSubmission) → Confirmation.
+ * Optionally shows a grading rubric in both the instructions and
+ * graded confirmation views.
+ *
+ * @example
+ * <AssignmentModule
+ *   title="Week 3 Essay"
+ *   instructions={<p>Write a 500-word essay on React hooks.</p>}
+ *   submissionTypes={["text", "file"]}
+ *   rubric={rubricCriteria}
+ *   onSubmit={(submission) => submitAssignment(submission)}
+ * />
+ */
+export interface AssignmentModuleProps {
+  /** Assignment title */
+  title: string;
+  /** Assignment instructions (rich content) */
+  instructions: ReactNode;
+  /** Due date as ISO string */
+  dueDate?: string;
+  /** Maximum score points */
+  maxScore?: number;
+  /** Allowed submission types */
+  submissionTypes: ("text" | "file" | "url")[];
+  /** File upload constraints */
+  fileConstraints?: {
+    maxFiles?: number;
+    maxSizeMB?: number;
+    acceptedTypes?: string;
+  };
+  /** Rubric criteria for grading (shown in instructions and graded confirmation) */
+  rubric?: RubricCriterion[];
+  /** Existing submission for editing/viewing */
+  existingSubmission?: SubmissionData;
+  /** Current submission status. @default "not_started" */
+  status?:
+    | "not_started"
+    | "draft"
+    | "submitted"
+    | "late"
+    | "graded"
+    | "resubmit";
+  /** Grade data when graded */
+  grade?: {
+    score: number;
+    feedback?: ReactNode;
+    /** Selected rubric level UIDs per criterion UID */
+    rubricLevels?: Record<string, string>;
+  };
+  /** Called on final submission */
+  onSubmit?: (submission: SubmissionData) => void;
+  /** Called on draft save */
+  onSaveDraft?: (submission: SubmissionData) => void;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}
+
+export interface AssignmentModuleResult {
+  /** The submitted data */
+  submission: SubmissionData;
+  /** Status after submission */
+  status: string;
+}