@hydralms/components 0.2.0 → 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,7 +1,11 @@
 import { useMemo } from "react";
+import { AlertCircle } from "lucide-react";
 import { CurriculumTree } from "../../curriculum";
 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";
@@ -16,6 +20,9 @@ export function CourseOutline({
   showDuration = true,
   showIcons = true,
   readOnly = false,
+  isLoading,
+  error,
+  onRetry,
   className,
   style,
 }: CourseOutlineProps) {
@@ -34,6 +41,40 @@ 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) && (

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,5 +1,7 @@
 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 { RichTextEditor } from "../../ui/rich-text-editor";
@@ -23,6 +25,9 @@ export function DiscussionThread({
   allowReplies = true,
   sortOrder = "oldest",
   readOnly = false,
+  isLoading,
+  error,
+  onRetry,
   className,
   style,
 }: DiscussionThreadProps) {
@@ -49,6 +54,42 @@ 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 (isEmptyHtml(replyContent)) return;
     onReply(parentUid, replyContent);

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 */