@hydralms/components 0.1.3 → 0.3.0

package/src/sections/CourseCatalog/CourseCatalog.tsx

@@ -0,0 +1,220 @@
+import { useMemo, useState } from "react";
+import { AlertCircle, Grid, List as ListIcon, GraduationCap } from "lucide-react";
+import { CourseCard } from "../../curriculum/course-card";
+import { SearchInput, EmptyState } from "../../common";
+import { Skeleton } from "../../ui/skeleton";
+import { Button } from "../../ui/button";
+import { Tabs, TabsList, TabsTrigger } from "../../ui/tabs";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../../ui/tooltip";
+import { Pagination } from "../../common/pagination";
+import type { CourseCatalogProps } from "./types";
+import { cn } from "../../lib/utils";
+
+export function CourseCatalog({
+  courses = [],
+  categories,
+  onCourseClick,
+  onEnroll,
+  viewMode: initialViewMode = "grid",
+  allowViewToggle = true,
+  showSearch = true,
+  emptyMessage = "No courses found",
+  readOnly = false,
+  isLoading,
+  error,
+  onRetry,
+  pageSize,
+  currentPage = 1,
+  totalItems,
+  onPageChange,
+  className,
+  style,
+}: CourseCatalogProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeCategoryUid, setActiveCategoryUid] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState(initialViewMode);
+
+  const filtered = useMemo(() => {
+    let result = courses;
+    if (activeCategoryUid) {
+      result = result.filter((c) => c.categoryUid === activeCategoryUid);
+    }
+    if (searchQuery.trim()) {
+      const q = searchQuery.toLowerCase();
+      result = result.filter(
+        (c) =>
+          c.title.toLowerCase().includes(q) ||
+          c.description?.toLowerCase().includes(q) ||
+          c.instructor?.displayName.toLowerCase().includes(q),
+      );
+    }
+    return result;
+  }, [courses, activeCategoryUid, searchQuery]);
+
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-4", className)} style={style}>
+        <Skeleton className="h-9 w-full" />
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-64 w-full rounded-lg" />
+          ))}
+        </div>
+      </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>
+    );
+  }
+
+  const paginatedItems =
+    onPageChange && pageSize
+      ? filtered.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+      : filtered;
+
+  return (
+    <div className={className} style={style}>
+      {/* Toolbar */}
+      <div className="flex gap-2 items-center mb-2">
+        {showSearch && (
+          <div className="flex-1 max-w-80">
+            <SearchInput
+              value={searchQuery}
+              onChange={setSearchQuery}
+              placeholder="Search courses..."
+              size="small"
+            />
+          </div>
+        )}
+        {allowViewToggle && (
+          <div className="flex gap-0.5">
+            <Tooltip>
+              <TooltipTrigger>
+                <Button
+                  variant="ghost"
+                  size="icon-xs"
+                  aria-label="Grid view"
+                  className={cn(viewMode === "grid" && "text-primary")}
+                  onClick={() => setViewMode("grid")}
+                >
+                  <Grid size={18} />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Grid view</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger>
+                <Button
+                  variant="ghost"
+                  size="icon-xs"
+                  aria-label="List view"
+                  className={cn(viewMode === "list" && "text-primary")}
+                  onClick={() => setViewMode("list")}
+                >
+                  <ListIcon size={18} />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>List view</TooltipContent>
+            </Tooltip>
+          </div>
+        )}
+      </div>
+
+      {/* Category tabs */}
+      {categories && categories.length > 0 && (
+        <Tabs
+          value={activeCategoryUid ?? "all"}
+          onValueChange={(v) => setActiveCategoryUid(v === "all" ? null : v)}
+          className="mb-2"
+        >
+          <TabsList>
+            <TabsTrigger value="all">All</TabsTrigger>
+            {categories.map((cat) => (
+              <TabsTrigger key={cat.uid} value={cat.uid}>{cat.label}</TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
+      )}
+
+      {/* Course grid/list */}
+      {filtered.length === 0 ? (
+        <EmptyState
+          icon={<GraduationCap />}
+          title={emptyMessage}
+          description="Try adjusting your search or filter."
+        />
+      ) : viewMode === "grid" ? (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {paginatedItems.map((course) => (
+            <CourseCard
+              key={course.uid}
+              uid={course.uid}
+              title={course.title}
+              description={course.description}
+              thumbnailUrl={course.thumbnailUrl}
+              instructor={course.instructor}
+              progress={course.progress}
+              enrollmentStatus={course.enrollmentStatus}
+              studentCount={course.studentCount}
+              duration={course.duration}
+              layout="vertical"
+              onClick={readOnly ? undefined : () => onCourseClick(course)}
+              onEnroll={
+                onEnroll && !readOnly ? () => onEnroll(course) : undefined
+              }
+              className={cn(readOnly && "opacity-70")}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="flex flex-col gap-2">
+          {paginatedItems.map((course) => (
+            <CourseCard
+              key={course.uid}
+              uid={course.uid}
+              title={course.title}
+              description={course.description}
+              thumbnailUrl={course.thumbnailUrl}
+              instructor={course.instructor}
+              progress={course.progress}
+              enrollmentStatus={course.enrollmentStatus}
+              studentCount={course.studentCount}
+              duration={course.duration}
+              layout="horizontal"
+              onClick={readOnly ? undefined : () => onCourseClick(course)}
+              onEnroll={
+                onEnroll && !readOnly ? () => onEnroll(course) : undefined
+              }
+              className={cn(readOnly && "opacity-70")}
+            />
+          ))}
+        </div>
+      )}
+
+      {onPageChange && pageSize && filtered.length > 0 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={Math.ceil((totalItems ?? filtered.length) / pageSize)}
+          onPageChange={onPageChange}
+          className="mt-4"
+        />
+      )}
+    </div>
+  );
+}

package/src/sections/CourseCatalog/types.ts

@@ -0,0 +1,76 @@
+
+/**
+ * CourseCatalog section — a searchable, filterable course catalog.
+ *
+ * Displays courses in a grid or list view with search, category tabs,
+ * view mode toggling, and optional pagination.
+ *
+ * @example
+ * <CourseCatalog
+ *   courses={courses}
+ *   categories={categories}
+ *   onCourseClick={(c) => navigate(`/courses/${c.uid}`)}
+ *   onEnroll={(c) => enroll(c.uid)}
+ * />
+ */
+export interface CourseCatalogProps {
+  /** Courses to display */
+  courses: CourseInfo[];
+  /** Optional categories for tab filtering */
+  categories?: { uid: string; label: string }[];
+  /** Called when the user clicks a course */
+  onCourseClick: (course: CourseInfo) => void;
+  /** Called when the user clicks enroll on a course */
+  onEnroll?: (course: CourseInfo) => void;
+  /** Layout view mode */
+  viewMode?: "grid" | "list";
+  /** Whether the user can toggle between grid and list */
+  allowViewToggle?: boolean;
+  /** Whether to show search */
+  showSearch?: boolean;
+  /** Empty state message */
+  emptyMessage?: string;
+  /** 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;
+  /** Number of items per page (enables pagination when set with onPageChange) */
+  pageSize?: number;
+  /** Current page (1-indexed) */
+  currentPage?: number;
+  /** Total number of items (for server-side pagination) */
+  totalItems?: number;
+  /** Called when the user navigates to a different page */
+  onPageChange?: (page: number) => void;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}
+
+export interface CourseInfo {
+  /** Unique identifier */
+  uid: string;
+  /** Course title */
+  title: string;
+  /** Course description */
+  description?: string;
+  /** Thumbnail image URL */
+  thumbnailUrl?: string;
+  /** Instructor info */
+  instructor?: { displayName: string; avatarUrl?: string };
+  /** Category UID for filtering */
+  categoryUid?: string;
+  /** Progress percentage (0-100) */
+  progress?: number;
+  /** Enrollment status */
+  enrollmentStatus?: "enrolled" | "completed" | "available" | "locked";
+  /** Number of enrolled students */
+  studentCount?: number;
+  /** Estimated duration (e.g. "12 hours") */
+  duration?: string;
+}

package/src/sections/CourseOutline/CourseOutline.tsx

@@ -1,22 +1,15 @@
 import { useMemo } from "react";
+import { AlertCircle } from "lucide-react";
 import { CurriculumTree } from "../../curriculum";
-import type { CurriculumItem } from "../../curriculum/types";
 import { Progress } from "../../ui/progress";
+import { Separator } from "../../ui/separator";
+import { Skeleton } from "../../ui/skeleton";
+import { Button } from "../../ui/button";
+import { EmptyState } from "../../common/empty-state";
+import { flattenLeaves } from "../../utils/flatten-leaves";
 import type { CourseOutlineProps } from "./types";
 import { cn } from "../../lib/utils";
 
-function flattenLeaves(items: CurriculumItem[]): string[] {
-  const leaves: string[] = [];
-  for (const item of items) {
-    if (!item.children || item.children.length === 0) {
-      leaves.push(item.uid);
-    } else {
-      leaves.push(...flattenLeaves(item.children));
-    }
-  }
-  return leaves;
-}
-
 export function CourseOutline({
   items,
   progress,
@@ -27,6 +20,9 @@ export function CourseOutline({
   showDuration = true,
   showIcons = true,
   readOnly = false,
+  isLoading,
+  error,
+  onRetry,
   className,
   style,
 }: CourseOutlineProps) {
@@ -45,10 +41,44 @@ export function CourseOutline({
     };
   }, [items, progress]);
 
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-4", className)} style={style}>
+        <Skeleton className="h-6 w-48" />
+        <Skeleton className="h-2 w-full" />
+        <Skeleton className="h-8 w-full" />
+        <Skeleton className="h-8 w-full ml-6" />
+        <Skeleton className="h-8 w-full ml-6" />
+        <Skeleton className="h-8 w-full" />
+        <Skeleton className="h-8 w-full ml-6" />
+        <Skeleton className="h-8 w-full" />
+      </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 (
     <div className={cn(className)} style={style}>
       {(courseTitle || showOverallProgress) && (
-        <div className="px-2 pt-2 pb-1">
+        <div className="px-2 pt-2 pb-2">
           {courseTitle && (
             <p className={cn("font-semibold text-sm text-foreground", showOverallProgress && "mb-1")}>
               {courseTitle}
@@ -64,6 +94,7 @@ export function CourseOutline({
           )}
         </div>
       )}
+      {(courseTitle || showOverallProgress) && <Separator />}
       <CurriculumTree
         items={items}
         progress={progress}

package/src/sections/CourseOutline/types.ts

@@ -46,6 +46,12 @@ export interface CourseOutlineProps {
   showIcons?: boolean;
   /** When true, disables all click 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 */

package/src/sections/DiscussionThread/DiscussionThread.tsx

@@ -1,8 +1,12 @@
 import { useMemo, useState } from "react";
-import { CheckCircle, Heart, MessageSquare, Reply } from "lucide-react";
+import { AlertCircle, CheckCircle, Heart, MessageSquare, Reply } from "lucide-react";
+import { Skeleton } from "../../ui/skeleton";
+import { EmptyState } from "../../common/empty-state";
 import { PostCard } from "../../social";
 import { Button } from "../../ui/button";
-import { Textarea } from "../../ui/textarea";
+import { RichTextEditor } from "../../ui/rich-text-editor";
+import { isEmptyHtml } from "../../utils/is-empty-html";
+import { Badge } from "../../ui/badge";
 import { Separator } from "../../ui/separator";
 import { Card, CardContent } from "../../ui/card";
 import { Tooltip, TooltipTrigger, TooltipContent } from "../../ui/tooltip";
@@ -21,6 +25,9 @@ export function DiscussionThread({
   allowReplies = true,
   sortOrder = "oldest",
   readOnly = false,
+  isLoading,
+  error,
+  onRetry,
   className,
   style,
 }: DiscussionThreadProps) {
@@ -47,9 +54,45 @@ export function DiscussionThread({
     return childrenMap;
   }, [replies, rootPost.uid, sortOrder]);
 
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-4", className)} style={style}>
+        <Skeleton className="h-7 w-64" />
+        <div className="flex items-start gap-3">
+          <Skeleton className="h-8 w-8 rounded-full shrink-0" />
+          <Skeleton className="h-32 w-full" />
+        </div>
+        {Array.from({ length: 2 }).map((_, i) => (
+          <div key={i} className="ml-8">
+            <Skeleton className="h-20 w-full" />
+          </div>
+        ))}
+      </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>
+    );
+  }
+
   function handleSubmitReply(parentUid: string) {
-    if (!replyContent.trim()) return;
-    onReply(parentUid, replyContent.trim());
+    if (isEmptyHtml(replyContent)) return;
+    onReply(parentUid, replyContent);
     setReplyContent("");
     setReplyingToUid(null);
   }
@@ -132,18 +175,19 @@ export function DiscussionThread({
             className="mb-2"
             style={{ marginLeft: `${(effectiveDepth + 1) * 16}px` }}
           >
-            <CardContent className="pt-4 pb-4">
-              <Textarea
+            <CardContent className="py-4">
+              <RichTextEditor
                 className="min-h-15 mb-2"
                 placeholder="Write a reply..."
                 value={replyContent}
-                onChange={(e) => setReplyContent(e.target.value)}
+                onChange={(html) => setReplyContent(html)}
+                variant="minimal"
               />
               <div className="flex items-center gap-2">
                 <Button
                   size="sm"
                   onClick={() => handleSubmitReply(post.uid)}
-                  disabled={!replyContent.trim()}
+                  disabled={isEmptyHtml(replyContent)}
                 >
                   Post Reply
                 </Button>
@@ -170,12 +214,12 @@ export function DiscussionThread({
 
   return (
     <div className={className} style={style}>
-      <div className="flex items-center gap-1 mb-2">
+      <div className="flex items-center gap-2 mb-2">
         <MessageSquare size={20} className="text-foreground shrink-0" />
         <span className="text-lg font-semibold text-foreground">{title}</span>
-        <span className="text-sm text-muted-foreground">
+        <Badge variant="muted" className="text-xs">
           {replies.length} {replies.length === 1 ? "reply" : "replies"}
-        </span>
+        </Badge>
       </div>
 
       <Separator className="mb-2" />

package/src/sections/DiscussionThread/types.ts

@@ -38,6 +38,12 @@ export interface DiscussionThreadProps {
   sortOrder?: "newest" | "oldest" | "most_liked";
   /** 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 */