@hydralms/components 0.1.1 → 0.1.3

package/src/common/search-input.tsx

@@ -0,0 +1,68 @@
+import { useState, useEffect, useCallback } from "react";
+import { Search, X } from "lucide-react";
+import { debounce } from "../utils/debounce";
+import type { SearchInputProps } from "./types";
+import { cn } from "../lib/utils";
+
+export function SearchInput({
+  value,
+  onChange,
+  placeholder = "Search...",
+  debounceMs = 300,
+  fullWidth = false,
+  size = "small",
+  className,
+  style,
+}: SearchInputProps) {
+  const [localValue, setLocalValue] = useState(value);
+
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedOnChange = useCallback(debounce(onChange, debounceMs), [onChange, debounceMs]);
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const next = e.target.value;
+    setLocalValue(next);
+    debouncedOnChange(next);
+  }
+
+  function handleClear() {
+    setLocalValue("");
+    onChange("");
+  }
+
+  return (
+    <div
+      className={cn("w-full", className)}
+      style={{ ...style, width: fullWidth ? "100%" : undefined }}
+    >
+      <div className="flex items-center w-full border border-input rounded-md bg-background transition-colors focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]">
+        <span className="flex items-center justify-center px-2 text-muted-foreground shrink-0">
+          <Search size={18} />
+        </span>
+        <input
+          className={cn(
+            "flex-1 border-none outline-none bg-transparent text-foreground text-sm min-w-0 placeholder:text-muted-foreground",
+            size === "medium" ? "py-2" : "py-1.5",
+          )}
+          value={localValue}
+          onChange={handleChange}
+          placeholder={placeholder}
+        />
+        {localValue && (
+          <button
+            type="button"
+            className="inline-flex items-center justify-center p-0.5 mr-1 rounded-md text-muted-foreground cursor-pointer transition-colors hover:bg-muted hover:text-foreground"
+            aria-label="Clear search"
+            onClick={handleClear}
+          >
+            <X size={16} />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/common/status-badge.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from "@testing-library/react";
+import { StatusBadge } from "./status-badge";
+
+describe("StatusBadge", () => {
+  it("renders the status text with title case", () => {
+    render(<StatusBadge status="submitted" />);
+    expect(screen.getByText("Submitted")).toBeInTheDocument();
+  });
+
+  it("converts underscores to spaces in label", () => {
+    render(<StatusBadge status="not_started" />);
+    expect(screen.getByText("Not Started")).toBeInTheDocument();
+  });
+
+  it("renders with default color mapping for graded", () => {
+    const { container } = render(<StatusBadge status="graded" />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it("renders with custom color map", () => {
+    render(
+      <StatusBadge
+        status="pending"
+        colorMap={{ pending: "warning" }}
+      />,
+    );
+    expect(screen.getByText("Pending")).toBeInTheDocument();
+  });
+
+  it("falls back to gray for unknown statuses", () => {
+    render(<StatusBadge status="unknown_status" />);
+    expect(screen.getByText("Unknown Status")).toBeInTheDocument();
+  });
+
+  it("renders all default status types", () => {
+    const statuses = ["graded", "submitted", "pending", "missing", "late", "excused", "draft", "resubmit"];
+    for (const status of statuses) {
+      const { unmount } = render(<StatusBadge status={status} />);
+      expect(screen.getByText(status.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()))).toBeInTheDocument();
+      unmount();
+    }
+  });
+});

package/src/common/status-badge.tsx

@@ -0,0 +1,81 @@
+import type { StatusBadgeProps } from "./types";
+import { Badge } from "../ui/badge";
+import { cn } from "../lib/utils";
+
+const DEFAULT_COLOR_MAP: Record<string, string> = {
+  graded: "green",
+  submitted: "teal",
+  pending: "gray",
+  missing: "red",
+  late: "orange",
+  excused: "gray",
+  draft: "gray",
+  not_started: "gray",
+  resubmit: "orange",
+};
+
+const MUI_TO_COLOR: Record<string, string> = {
+  success: "green",
+  error: "red",
+  warning: "orange",
+  info: "teal",
+  default: "gray",
+};
+
+const COLOR_TO_VARIANT: Record<string, "success" | "destructive" | "warning" | "muted" | "info"> = {
+  green: "success",
+  red: "destructive",
+  orange: "warning",
+  gray: "muted",
+  teal: "info",
+};
+
+const OUTLINED_CLASS: Record<string, string> = {
+  green: "bg-transparent border-success text-success",
+  red: "bg-transparent border-destructive text-destructive",
+  orange: "bg-transparent border-warning text-warning",
+  gray: "bg-transparent border-border text-muted-foreground",
+  teal: "bg-transparent border-info text-info",
+};
+
+const FILLED_OVERRIDE: Record<string, string> = {
+  green: "bg-success text-success-foreground",
+  red: "bg-destructive text-destructive-foreground",
+  orange: "bg-warning text-warning-foreground",
+  teal: "bg-info text-info-foreground",
+};
+
+export function StatusBadge({
+  status,
+  colorMap,
+  size = "small",
+  variant = "filled",
+}: StatusBadgeProps) {
+  const map = { ...DEFAULT_COLOR_MAP };
+  if (colorMap) {
+    for (const [key, value] of Object.entries(colorMap)) {
+      map[key] = MUI_TO_COLOR[value] ?? value;
+    }
+  }
+  const colorPalette = map[status] ?? "gray";
+  const label = status.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+
+  const badgeVariant = COLOR_TO_VARIANT[colorPalette] ?? "muted";
+
+  const extraClass = variant === "outlined"
+    ? OUTLINED_CLASS[colorPalette] ?? OUTLINED_CLASS.gray
+    : FILLED_OVERRIDE[colorPalette] ?? undefined;
+
+  return (
+    <Badge
+      variant={badgeVariant}
+      className={cn(
+        size === "small" ? "text-xs px-2 h-5.5" : "text-sm px-2.5 h-6.5",
+        "leading-none",
+        extraClass,
+      )}
+    >
+      {label}
+    </Badge>
+  );
+}

package/src/common/types.ts

@@ -0,0 +1,129 @@
+import type { ReactNode } from "react";
+
+/**
+ * EmptyState displays a centered placeholder with an icon, title, and optional description
+ * for empty lists or views.
+ *
+ * @example
+ * <EmptyState
+ *   title="No announcements"
+ *   description="Check back later for updates"
+ * />
+ */
+export interface EmptyStateProps {
+  /** Optional icon rendered above the title */
+  icon?: ReactNode;
+  /** Primary message text */
+  title: string;
+  /** Secondary descriptive text */
+  description?: string;
+  /** Optional call-to-action element below the description */
+  action?: ReactNode;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}
+
+/**
+ * ConfirmDialog renders a modal confirmation dialog with customizable title,
+ * message, and confirm/cancel actions.
+ *
+ * @example
+ * <ConfirmDialog
+ *   open={showDialog}
+ *   title="Submit exam?"
+ *   message="You cannot change your answers after submitting."
+ *   onConfirm={handleSubmit}
+ *   onCancel={() => setShowDialog(false)}
+ * />
+ */
+export interface ConfirmDialogProps {
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Dialog title */
+  title: string;
+  /** Dialog body content */
+  message: ReactNode;
+  /** Label for the confirm button */
+  confirmLabel?: string;
+  /** Label for the cancel button */
+  cancelLabel?: string;
+  /** Color of the confirm button */
+  confirmColor?: "primary" | "error" | "warning";
+  /** Called when the user confirms */
+  onConfirm: () => void;
+  /** Called when the user cancels */
+  onCancel: () => void;
+  /** Whether the confirm action is in progress */
+  isLoading?: boolean;
+}
+
+/**
+ * SearchInput provides a debounced text field with a search icon and clear button.
+ *
+ * @example
+ * <SearchInput
+ *   value={query}
+ *   onChange={setQuery}
+ *   placeholder="Search resources..."
+ * />
+ */
+export interface SearchInputProps {
+  /** Current search value */
+  value: string;
+  /** Called with the new value after debounce */
+  onChange: (value: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Debounce delay in milliseconds */
+  debounceMs?: number;
+  /** Whether the input spans full width */
+  fullWidth?: boolean;
+  /** Input size variant */
+  size?: "small" | "medium";
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}
+
+/**
+ * StatusBadge renders a semantic colored chip for displaying entity statuses
+ * such as "submitted", "graded", "late", or "missing".
+ *
+ * @example
+ * <StatusBadge status="submitted" />
+ */
+export interface StatusBadgeProps {
+  /** Status string to display */
+  status: string;
+  /** Custom color mapping override — falls back to built-in defaults */
+  colorMap?: Record<string, "success" | "error" | "warning" | "info" | "default">;
+  /** Chip size */
+  size?: "small" | "medium";
+  /** Chip variant */
+  variant?: "filled" | "outlined";
+}
+
+/**
+ * DueDateDisplay shows a due date with relative time ("in 2 days", "3 days ago")
+ * and urgency-based coloring.
+ *
+ * @example
+ * <DueDateDisplay dueDate="2025-03-15T23:59:00Z" />
+ */
+export interface DueDateDisplayProps {
+  /** Due date as an ISO 8601 string */
+  dueDate: string;
+  /** Submission date — if provided, shows "submitted" state instead of urgency */
+  submittedDate?: string;
+  /** Whether to show the relative time label */
+  showRelative?: boolean;
+  /** Display size */
+  size?: "small" | "medium";
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}

package/src/content/content-block.tsx

@@ -0,0 +1,116 @@
+import { Info, AlertTriangle, Lightbulb } from "lucide-react";
+import { VideoPlayer } from "../video";
+import { QuestionRenderer } from "../questions";
+import { FlashcardDeck } from "../flashcards";
+import { Alert, AlertDescription } from "../ui/alert";
+import { Separator } from "../ui/separator";
+import type { ContentBlockProps } from "./types";
+import { cn } from "../lib/utils";
+
+const CALLOUT_CONFIG = {
+  info: { variant: "info" as const, Icon: Info },
+  warning: { variant: "warning" as const, Icon: AlertTriangle },
+  tip: { variant: "success" as const, Icon: Lightbulb },
+};
+
+export function ContentBlock({
+  block,
+  onQuestionAnswer,
+  readOnly = false,
+  className,
+  style,
+}: ContentBlockProps) {
+  const wrapper = (children: React.ReactNode) => (
+    <div className={cn(className)} style={style}>
+      {children}
+    </div>
+  );
+
+  switch (block.type) {
+    case "video":
+      return wrapper(<VideoPlayer {...block.video} readOnly={readOnly} />);
+
+    case "richtext":
+      return wrapper(
+        <div
+          className="[&_p]:mb-[1.5em] [&_ul]:pl-[1.5em] [&_ol]:pl-[1.5em]"
+          dangerouslySetInnerHTML={{ __html: block.html }}
+        />
+      );
+
+    case "heading": {
+      const Tag = block.level === 1 ? "h2" : block.level === 3 ? "h4" : "h3";
+      const headingClass =
+        block.level === 1
+          ? "text-xl"
+          : block.level === 3
+            ? "text-base"
+            : "text-lg";
+      return wrapper(
+        <Tag className={cn(headingClass, "font-semibold m-0")}>{block.text}</Tag>
+      );
+    }
+
+    case "image":
+      return wrapper(
+        <figure className="m-0">
+          <img
+            src={block.src}
+            alt={block.alt ?? ""}
+            className="max-w-full rounded-sm"
+          />
+          {block.caption && (
+            <figcaption className="text-xs text-muted-foreground mt-0.5">
+              {block.caption}
+            </figcaption>
+          )}
+        </figure>
+      );
+
+    case "callout": {
+      const config = CALLOUT_CONFIG[block.variant ?? "info"];
+      return wrapper(
+        <Alert variant={config.variant}>
+          <config.Icon size={20} />
+          <AlertDescription>{block.content}</AlertDescription>
+        </Alert>
+      );
+    }
+
+    case "question":
+      return wrapper(
+        <QuestionRenderer
+          question={block.question}
+          onAnswer={(answers) =>
+            onQuestionAnswer?.(
+              block.question.uid,
+              answers.map((a) => ({
+                uid: block.question.uid,
+                answerUid: a.uid,
+                content: a.content,
+              })),
+            )
+          }
+          readOnly={readOnly}
+        />
+      );
+
+    case "flashcards":
+      return wrapper(
+        <FlashcardDeck
+          cards={block.cards}
+          deckName={block.deckName}
+          readOnly={readOnly}
+        />
+      );
+
+    case "divider":
+      return wrapper(<Separator />);
+
+    case "custom":
+      return wrapper(<>{block.render}</>);
+
+    default:
+      return null;
+  }
+}

package/src/content/file-upload-zone.tsx

@@ -0,0 +1,109 @@
+import { useRef, useState } from "react";
+import { Upload, File, X } from "lucide-react";
+import { Button } from "../ui/button";
+import type { FileUploadZoneProps } from "./types";
+import { cn } from "../lib/utils";
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export function FileUploadZone({
+  files,
+  onFilesAdded,
+  onFileRemove,
+  accept,
+  maxFiles,
+  maxSizeMB,
+  disabled = false,
+  label = "Drag files here or click to browse",
+}: FileUploadZoneProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const atLimit = maxFiles != null && files.length >= maxFiles;
+
+  function validateAndAdd(incoming: FileList | null) {
+    if (!incoming) return;
+    let valid = Array.from(incoming);
+    if (maxSizeMB) {
+      valid = valid.filter((f) => f.size <= maxSizeMB * 1024 * 1024);
+    }
+    if (maxFiles) {
+      valid = valid.slice(0, maxFiles - files.length);
+    }
+    if (valid.length > 0) onFilesAdded(valid);
+  }
+
+  return (
+    <div>
+      <div
+        className={cn(
+          "border-2 border-dashed border-border rounded-md p-8 text-center cursor-pointer transition-all duration-200",
+          isDragging && "border-primary bg-muted",
+          disabled && "cursor-default opacity-50",
+          atLimit && "cursor-default",
+        )}
+        onDragOver={(e) => {
+          e.preventDefault();
+          if (!disabled && !atLimit) setIsDragging(true);
+        }}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={(e) => {
+          e.preventDefault();
+          setIsDragging(false);
+          if (!disabled && !atLimit) validateAndAdd(e.dataTransfer.files);
+        }}
+        onClick={() => !disabled && !atLimit && inputRef.current?.click()}
+      >
+        <Upload size={32} className="mx-auto mb-2 opacity-50" />
+        <span className="text-sm text-muted-foreground">
+          {atLimit ? `Maximum ${maxFiles} files reached` : label}
+        </span>
+        {(accept || maxSizeMB) && (
+          <span className="text-xs text-muted-foreground mt-1 block">
+            {[accept && `Accepted: ${accept}`, maxSizeMB && `Max: ${maxSizeMB}MB`]
+              .filter(Boolean)
+              .join(" \u00B7 ")}
+          </span>
+        )}
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple={!maxFiles || maxFiles > 1}
+        hidden
+        onChange={(e) => {
+          validateAndAdd(e.target.files);
+          e.target.value = "";
+        }}
+      />
+      {files.length > 0 && (
+        <div className="flex flex-col gap-1 mt-2">
+          {files.map((file, index) => (
+            <div key={`${file.name}-${index}`} className="flex items-center gap-3 py-1">
+              <div className="shrink-0 w-9 flex justify-center text-muted-foreground">
+                <File size={18} />
+              </div>
+              <div className="flex-1 min-w-0">
+                <span className="text-sm block truncate">{file.name}</span>
+                <span className="text-xs text-muted-foreground">{formatFileSize(file.size)}</span>
+              </div>
+              <Button
+                variant="ghost"
+                size="icon-xs"
+                aria-label="Remove file"
+                onClick={() => onFileRemove(index)}
+                disabled={disabled}
+              >
+                <X size={16} />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/content/index.ts

@@ -0,0 +1,7 @@
+export { ContentBlock } from "./content-block";
+export { FileUploadZone } from "./file-upload-zone";
+export type {
+  LessonBlock,
+  ContentBlockProps,
+  FileUploadZoneProps,
+} from "./types";

package/src/content/types.ts

@@ -0,0 +1,76 @@
+import type { ReactNode } from "react";
+import type { VideoPlayerProps } from "../video/types";
+import type { QuestionData, SessionAnswer } from "../questions/types";
+import type { FlashcardData } from "../flashcards/types";
+
+/**
+ * A single content block within a lesson page.
+ */
+export type LessonBlock =
+  | { type: "video"; video: VideoPlayerProps }
+  | { type: "richtext"; html: string }
+  | { type: "heading"; text: string; level?: 1 | 2 | 3 }
+  | { type: "image"; src: string; alt?: string; caption?: string }
+  | { type: "callout"; content: string; variant?: "info" | "warning" | "tip" }
+  | { type: "question"; question: QuestionData }
+  | { type: "flashcards"; cards: FlashcardData[]; deckName?: string }
+  | { type: "divider" }
+  | { type: "custom"; render: ReactNode };
+
+/**
+ * ContentBlock renders a single typed content block within a lesson,
+ * dispatching to the appropriate component based on the block type.
+ *
+ * @example
+ * <ContentBlock
+ *   block={{ type: "callout", content: "Remember to save your work!", variant: "tip" }}
+ * />
+ */
+export interface ContentBlockProps {
+  /** The content block to render */
+  block: LessonBlock;
+  /** Called when the user answers an embedded question */
+  onQuestionAnswer?: (questionUid: string, answers: SessionAnswer[]) => void;
+  /** When true, disables interactive elements */
+  readOnly?: boolean;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}
+
+/**
+ * FileUploadZone provides a drag-and-drop file upload area with file list
+ * preview, type icons, size display, and remove capability.
+ *
+ * @example
+ * <FileUploadZone
+ *   files={files}
+ *   onFilesAdded={(newFiles) => setFiles([...files, ...newFiles])}
+ *   onFileRemove={(index) => setFiles(files.filter((_, i) => i !== index))}
+ *   accept=".pdf,.docx"
+ *   maxFiles={5}
+ * />
+ */
+export interface FileUploadZoneProps {
+  /** Currently selected files */
+  files: File[];
+  /** Called when new files are added via drop or browse */
+  onFilesAdded: (files: File[]) => void;
+  /** Called when a file is removed by index */
+  onFileRemove: (index: number) => void;
+  /** Accepted file types (e.g. ".pdf,.docx") */
+  accept?: string;
+  /** Maximum number of files allowed */
+  maxFiles?: number;
+  /** Maximum file size in megabytes */
+  maxSizeMB?: number;
+  /** Whether the upload zone is disabled */
+  disabled?: boolean;
+  /** Label text inside the drop zone */
+  label?: string;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}