@hydralms/components 0.1.1 → 0.1.2

package/src/sections/AssessmentReview/AssessmentReview.tsx

@@ -0,0 +1,148 @@
+import { QuestionRenderer } from "../../questions";
+import type { QuestionData, SessionAnswer } from "../../questions/types";
+import { Badge } from "../../ui/badge";
+import { Card, CardContent } from "../../ui/card";
+import { Separator } from "../../ui/separator";
+import { cn } from "../../lib/utils";
+import type {
+  AssessmentReviewProps,
+  AssessmentReviewGroup,
+} from "./types";
+
+function ScoreHeader({
+  score,
+}: {
+  score: NonNullable<AssessmentReviewProps["score"]>;
+}) {
+  const pct =
+    score.percentage !== undefined
+      ? score.percentage
+      : score.total > 0
+        ? Math.round((score.correct / score.total) * 100)
+        : 0;
+
+  return (
+    <Card className="mb-3">
+      <CardContent className="pt-6">
+        <div className="flex flex-wrap items-center gap-2">
+          <div>
+            <span className="text-2xl font-bold leading-none text-foreground">{pct}%</span>
+            <span className="text-sm text-muted-foreground">
+              {score.correct} of {score.total} correct
+            </span>
+          </div>
+          {score.passed !== undefined && (
+            <Badge variant={score.passed ? "success" : "destructive"}>
+              {score.passed ? "Passed" : "Failed"}
+            </Badge>
+          )}
+          {score.passingScore !== undefined && (
+            <span className="text-sm text-muted-foreground">
+              Passing score: {score.passingScore}%
+            </span>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function QuestionList({
+  questions,
+  sessionAnswers,
+  showCorrectAnswers,
+}: {
+  questions: QuestionData[];
+  sessionAnswers: SessionAnswer[];
+  showCorrectAnswers: boolean;
+}) {
+  return (
+    <div className="flex flex-col gap-3">
+      {questions.map((question, idx) => (
+        <Card key={question.uid} className="overflow-hidden">
+          <div className="px-2 py-1 bg-muted">
+            <span className="text-xs text-muted-foreground font-semibold">
+              Question {idx + 1}
+            </span>
+          </div>
+          <Separator />
+          <CardContent className="pt-4 pb-4">
+            <QuestionRenderer
+              question={question}
+              sessionAnswers={sessionAnswers.filter((a) => a.uid === question.uid)}
+              readOnly
+              showCorrectAnswers={showCorrectAnswers}
+            />
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+function renderGroups(
+  questions: QuestionData[],
+  sessionAnswers: SessionAnswer[],
+  questionGroups: AssessmentReviewGroup[],
+  showCorrectAnswers: boolean,
+) {
+  const questionMap = new Map(questions.map((q) => [q.uid, q]));
+  const groupedUids = new Set(questionGroups.flatMap((g) => g.questionUids));
+  const ungrouped = questions.filter((q) => !groupedUids.has(q.uid));
+
+  return (
+    <div className="flex flex-col gap-4">
+      {questionGroups.map((group) => {
+        const groupQuestions = group.questionUids
+          .map((uid) => questionMap.get(uid))
+          .filter(Boolean) as QuestionData[];
+        return (
+          <div key={group.label}>
+            <span className="uppercase text-xs tracking-wide text-muted-foreground font-semibold">
+              {group.label}
+            </span>
+            <Separator className="mb-2" />
+            <QuestionList
+              questions={groupQuestions}
+              sessionAnswers={sessionAnswers}
+              showCorrectAnswers={showCorrectAnswers}
+            />
+          </div>
+        );
+      })}
+      {ungrouped.length > 0 && (
+        <div>
+          <QuestionList
+            questions={ungrouped}
+            sessionAnswers={sessionAnswers}
+            showCorrectAnswers={showCorrectAnswers}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function AssessmentReview({
+  questions,
+  sessionAnswers,
+  score,
+  questionGroups,
+  showCorrectAnswers = true,
+  className,
+  style,
+}: AssessmentReviewProps) {
+  return (
+    <div className={cn(className)} style={style}>
+      {score && <ScoreHeader score={score} />}
+      {questionGroups && questionGroups.length > 0
+        ? renderGroups(questions, sessionAnswers, questionGroups, showCorrectAnswers)
+        : <QuestionList
+            questions={questions}
+            sessionAnswers={sessionAnswers}
+            showCorrectAnswers={showCorrectAnswers}
+          />
+      }
+    </div>
+  );
+}

package/src/sections/AssessmentReview/types.ts

@@ -0,0 +1,61 @@
+import type { QuestionData, SessionAnswer } from "../../questions/types";
+
+/**
+ * AssessmentReview section — read-only review of a completed assessment.
+ *
+ * Renders all questions in review mode with correct/incorrect highlighting
+ * and an optional score summary header. Supports optional grouping of
+ * questions by section label.
+ *
+ * @example
+ * <AssessmentReview
+ *   questions={questions}
+ *   sessionAnswers={submittedAnswers}
+ *   score={{ correct: 8, total: 10, passed: true, passingScore: 70 }}
+ * />
+ */
+export interface AssessmentReviewProps {
+  /** All questions that were in the assessment */
+  questions: QuestionData[];
+  /** The user's submitted answers */
+  sessionAnswers: SessionAnswer[];
+  /**
+   * Score metadata to display in the summary header.
+   * If omitted, the score header is not rendered.
+   */
+  score?: AssessmentScore;
+  /**
+   * Optional grouping: renders questions under section headings.
+   * Questions not referenced in any group are rendered last without a heading.
+   */
+  questionGroups?: AssessmentReviewGroup[];
+  /**
+   * Whether to show correct/incorrect answer highlighting on each question.
+   * @default true
+   */
+  showCorrectAnswers?: boolean;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}
+
+export interface AssessmentScore {
+  /** Number of correct answers */
+  correct: number;
+  /** Total number of questions */
+  total: number;
+  /** Optional pre-computed percentage (falls back to correct/total * 100) */
+  percentage?: number;
+  /** Whether the user passed */
+  passed?: boolean;
+  /** Passing threshold as a percentage (e.g. 70 means 70%) */
+  passingScore?: number;
+}
+
+export interface AssessmentReviewGroup {
+  /** Group label displayed as a section heading */
+  label: string;
+  /** UIDs of questions belonging to this group, in display order */
+  questionUids: string[];
+}

package/src/sections/AssignmentSubmission/AssignmentSubmission.tsx

@@ -0,0 +1,190 @@
+import { useState } from "react";
+import { Send, Save } from "lucide-react";
+import { StatusBadge, DueDateDisplay } from "../../common";
+import { FileUploadZone } from "../../content";
+import { Button } from "../../ui/button";
+import { Textarea } from "../../ui/textarea";
+import { Input } from "../../ui/input";
+import { Separator } from "../../ui/separator";
+import { Card, CardContent } from "../../ui/card";
+import { Alert, AlertDescription } from "../../ui/alert";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../ui/tabs";
+import type { AssignmentSubmissionProps, SubmissionData } from "./types";
+
+export function AssignmentSubmission({
+  title,
+  instructions,
+  dueDate,
+  maxScore,
+  status,
+  submissionTypes,
+  existingSubmission,
+  fileConstraints,
+  onSubmit,
+  onSaveDraft,
+  grade,
+  isSubmitting = false,
+  readOnly = false,
+  className,
+  style,
+}: AssignmentSubmissionProps) {
+  const [textContent, setTextContent] = useState(existingSubmission?.textContent ?? "");
+  const [files, setFiles] = useState<File[]>(existingSubmission?.files ?? []);
+  const [url, setUrl] = useState(existingSubmission?.url ?? "");
+  const [activeTab, setActiveTab] = useState<"text" | "file" | "url">(submissionTypes[0]);
+
+  const isEditable = !readOnly && !["submitted", "graded"].includes(status);
+
+  function getSubmissionData(): SubmissionData {
+    return {
+      textContent: submissionTypes.includes("text") ? textContent : undefined,
+      files: submissionTypes.includes("file") ? files : undefined,
+      url: submissionTypes.includes("url") ? url : undefined,
+    };
+  }
+
+  return (
+    <div className={className} style={style}>
+      {/* Header */}
+      <div className="flex justify-between items-start mb-2">
+        <div>
+          <div className="text-xl font-bold text-foreground mb-0.5">{title}</div>
+          <div className="flex items-center gap-2">
+            <StatusBadge status={status} />
+            {dueDate && <DueDateDisplay dueDate={dueDate} size="small" />}
+            {maxScore != null && (
+              <span className="text-sm text-muted-foreground">{maxScore} points</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Instructions */}
+      <Card className="mb-3">
+        <CardContent className="pt-6">
+          <div className="font-semibold text-sm text-foreground mb-1">Instructions</div>
+          <div className="text-muted-foreground text-sm">
+            {typeof instructions === "string" ? (
+              <span>{instructions}</span>
+            ) : (
+              instructions
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Grade display */}
+      {grade && (
+        <Alert variant="success" className="mb-3">
+          <AlertDescription>
+            <div className="font-semibold text-sm mb-1">
+              Grade: {grade.score}{maxScore != null ? ` / ${maxScore}` : ""}
+            </div>
+            {grade.feedback && (
+              <div>{grade.feedback}</div>
+            )}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Submission area */}
+      {isEditable && (
+        <>
+          {submissionTypes.length > 1 ? (
+            <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as "text" | "file" | "url")}>
+              <TabsList>
+                {submissionTypes.includes("text") && <TabsTrigger value="text">Text</TabsTrigger>}
+                {submissionTypes.includes("file") && <TabsTrigger value="file">File Upload</TabsTrigger>}
+                {submissionTypes.includes("url") && <TabsTrigger value="url">URL</TabsTrigger>}
+              </TabsList>
+              {submissionTypes.includes("text") && (
+                <TabsContent value="text">
+                  <Textarea
+                    className="min-h-45"
+                    placeholder="Type your submission..."
+                    value={textContent}
+                    onChange={(e) => setTextContent(e.target.value)}
+                  />
+                </TabsContent>
+              )}
+              {submissionTypes.includes("file") && (
+                <TabsContent value="file">
+                  <FileUploadZone
+                    files={files}
+                    onFilesAdded={(newFiles) => setFiles((prev) => [...prev, ...newFiles])}
+                    onFileRemove={(index) => setFiles((prev) => prev.filter((_, i) => i !== index))}
+                    accept={fileConstraints?.acceptedTypes}
+                    maxFiles={fileConstraints?.maxFiles}
+                    maxSizeMB={fileConstraints?.maxSizeMB}
+                  />
+                </TabsContent>
+              )}
+              {submissionTypes.includes("url") && (
+                <TabsContent value="url">
+                  <Input
+                    placeholder="https://..."
+                    value={url}
+                    onChange={(e) => setUrl(e.target.value)}
+                  />
+                </TabsContent>
+              )}
+            </Tabs>
+          ) : (
+            <>
+              {submissionTypes.includes("text") && (
+                <Textarea
+                  className="min-h-45 mb-2"
+                  placeholder="Type your submission..."
+                  value={textContent}
+                  onChange={(e) => setTextContent(e.target.value)}
+                />
+              )}
+              {submissionTypes.includes("file") && (
+                <div className="mb-2">
+                  <FileUploadZone
+                    files={files}
+                    onFilesAdded={(newFiles) => setFiles((prev) => [...prev, ...newFiles])}
+                    onFileRemove={(index) => setFiles((prev) => prev.filter((_, i) => i !== index))}
+                    accept={fileConstraints?.acceptedTypes}
+                    maxFiles={fileConstraints?.maxFiles}
+                    maxSizeMB={fileConstraints?.maxSizeMB}
+                  />
+                </div>
+              )}
+              {submissionTypes.includes("url") && (
+                <Input
+                  className="mb-2"
+                  placeholder="https://..."
+                  value={url}
+                  onChange={(e) => setUrl(e.target.value)}
+                />
+              )}
+            </>
+          )}
+
+          <Separator className="my-2" />
+
+          <div className="flex gap-2 justify-end">
+            {onSaveDraft && (
+              <Button
+                variant="outline"
+                onClick={() => onSaveDraft(getSubmissionData())}
+                disabled={isSubmitting}
+              >
+                <Save size={16} />
+                Save Draft
+              </Button>
+            )}
+            <Button
+              onClick={() => onSubmit(getSubmissionData())}
+              disabled={isSubmitting}
+            >
+              <Send size={16} />
+              {isSubmitting ? "Submitting..." : "Submit"}
+            </Button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/sections/AssignmentSubmission/types.ts

@@ -0,0 +1,60 @@
+import type { ReactNode } from "react";
+
+/**
+ * AssignmentSubmission section — an assignment detail and submission view.
+ *
+ * Displays assignment instructions, due date, and submission status.
+ * Supports file upload, text, and URL submission types with draft saving
+ * and grade/feedback display.
+ *
+ * @example
+ * <AssignmentSubmission
+ *   title="Week 3 Essay"
+ *   instructions={<p>Write a 500-word essay on React.</p>}
+ *   dueDate="2025-03-15T23:59:00Z"
+ *   status="not_started"
+ *   submissionTypes={["text", "file"]}
+ *   onSubmit={(data) => submitAssignment(data)}
+ * />
+ */
+export interface AssignmentSubmissionProps {
+  /** Assignment title */
+  title: string;
+  /** Assignment instructions (rich content) */
+  instructions: ReactNode;
+  /** Due date as ISO string */
+  dueDate?: string;
+  /** Maximum score points */
+  maxScore?: number;
+  /** Current submission status */
+  status: "not_started" | "draft" | "submitted" | "late" | "graded" | "resubmit";
+  /** Allowed submission types */
+  submissionTypes: ("text" | "file" | "url")[];
+  /** Existing submission data for editing/viewing */
+  existingSubmission?: SubmissionData;
+  /** File upload constraints */
+  fileConstraints?: { maxFiles?: number; maxSizeMB?: number; acceptedTypes?: string };
+  /** Called on final submission */
+  onSubmit: (submission: SubmissionData) => void;
+  /** Called on draft save */
+  onSaveDraft?: (submission: SubmissionData) => void;
+  /** Grade data when already graded */
+  grade?: { score: number; feedback?: ReactNode };
+  /** Whether the submit action is in flight */
+  isSubmitting?: boolean;
+  /** When true, disables all interactions */
+  readOnly?: boolean;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}
+
+export interface SubmissionData {
+  /** Text content */
+  textContent?: string;
+  /** Uploaded files */
+  files?: File[];
+  /** URL submission */
+  url?: string;
+}

package/src/sections/CertificateViewer/CertificateViewer.tsx

@@ -0,0 +1,117 @@
+import { Award, Download, Printer } from "lucide-react";
+import { Button } from "../../ui/button";
+import { Separator } from "../../ui/separator";
+import type { CertificateViewerProps } from "./types";
+import { cn } from "../../lib/utils";
+
+const VARIANT_CLASSES: Record<string, string> = {
+  classic: "border-[3px] border-double border-warning bg-linear-to-br from-[#fffbe6] to-[#fff8e1]",
+  modern: "border border-primary bg-linear-to-br from-[#fff5f5] to-[#fee2e2]",
+  minimal: "border border-border",
+};
+
+export function CertificateViewer({
+  recipientName,
+  courseTitle,
+  completionDate,
+  organizationName,
+  organizationLogo,
+  signatory,
+  certificateId,
+  variant = "classic",
+  showActions = true,
+  onPrint,
+  onDownload,
+  className,
+  style,
+}: CertificateViewerProps) {
+  const formattedDate = (() => {
+    try {
+      return new Date(completionDate).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      });
+    } catch {
+      return completionDate;
+    }
+  })();
+
+  function handlePrint() {
+    if (onPrint) {
+      onPrint();
+    } else {
+      window.print();
+    }
+  }
+
+  return (
+    <div className={className} style={style}>
+      <div
+        className={cn(
+          "p-3 sm:p-5 md:p-6 text-center max-w-200 mx-auto rounded-md",
+          VARIANT_CLASSES[variant],
+        )}
+      >
+        {/* Logo or icon */}
+        {organizationLogo ? (
+          <img
+            src={organizationLogo}
+            alt={organizationName}
+            className="h-15 mb-2 mx-auto block"
+          />
+        ) : (
+          <Award
+            size={48}
+            className={cn("mx-auto mb-4", variant === "classic" && "text-warning")}
+          />
+        )}
+
+        <p className="uppercase tracking-[3px] text-sm text-foreground/70">
+          Certificate of Completion
+        </p>
+
+        <Separator className="my-2 mx-auto max-w-50" />
+
+        <p className="text-sm text-foreground mb-1">This is to certify that</p>
+        <p className={cn("text-2xl font-bold mb-2 text-foreground", variant === "classic" && "font-serif")}>
+          {recipientName}
+        </p>
+        <p className="text-sm text-foreground mb-1">has successfully completed</p>
+        <p className="text-xl font-bold mb-2 text-primary">{courseTitle}</p>
+
+        <p className="text-sm text-foreground mb-3">
+          Issued by {organizationName} on {formattedDate}
+        </p>
+
+        {signatory && (
+          <div className="mt-4 mb-2">
+            <Separator className="my-2 mx-auto max-w-50" />
+            <p className="font-semibold text-sm text-foreground">{signatory.name}</p>
+            <p className="text-xs text-muted-foreground">{signatory.title}</p>
+          </div>
+        )}
+
+        {certificateId && (
+          <span className="block text-xs text-muted-foreground mt-2">
+            Certificate ID: {certificateId}
+          </span>
+        )}
+      </div>
+
+      {/* Actions */}
+      {showActions && (
+        <div className="flex justify-center gap-2 mt-3">
+          <Button variant="outline" onClick={handlePrint}>
+            <Printer size={16} /> Print
+          </Button>
+          {onDownload && (
+            <Button variant="outline" onClick={onDownload}>
+              <Download size={16} /> Download
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/sections/CertificateViewer/types.ts

@@ -0,0 +1,45 @@
+
+/**
+ * CertificateViewer section — a printable completion certificate.
+ *
+ * Displays a certificate with recipient details, course information,
+ * signatory, and verification ID. Supports three visual variants:
+ * classic, modern, and minimal.
+ *
+ * @example
+ * <CertificateViewer
+ *   recipientName="Jane Smith"
+ *   courseTitle="Advanced React"
+ *   completionDate="2025-03-01"
+ *   organizationName="HydraLMS Academy"
+ *   variant="modern"
+ * />
+ */
+export interface CertificateViewerProps {
+  /** Recipient's full name */
+  recipientName: string;
+  /** Course or program title */
+  courseTitle: string;
+  /** Completion date as ISO string or human-readable string */
+  completionDate: string;
+  /** Issuing organization name */
+  organizationName: string;
+  /** Organization logo URL */
+  organizationLogo?: string;
+  /** Signatory information */
+  signatory?: { name: string; title: string };
+  /** Unique certificate ID */
+  certificateId?: string;
+  /** Certificate template variant */
+  variant?: "classic" | "modern" | "minimal";
+  /** Whether to show print/download actions */
+  showActions?: boolean;
+  /** Called when print is triggered */
+  onPrint?: () => void;
+  /** Called when download is triggered */
+  onDownload?: () => void;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}