@hydralms/components 0.1.2 → 0.2.0

package/src/sections/CertificateViewer/CertificateViewer.tsx

@@ -1,15 +1,320 @@
 import { Award, Download, Printer } from "lucide-react";
+import { cva } from "class-variance-authority";
 import { Button } from "../../ui/button";
-import { Separator } from "../../ui/separator";
-import type { CertificateViewerProps } from "./types";
+import type { CertificateViewerProps, CertificateVariant } 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",
+// ─── Frame CVAs ────────────────────────────────────────────────
+// Double-frame variants (classic, elegant, academic) use outer + inner borders
+// with a gap between them. Single-frame variants collapse the outer.
+
+const outerFrameVariants = cva("mx-auto max-w-4xl", {
+  variants: {
+    variant: {
+      classic:
+        "border-[3px] border-double border-warning/50 rounded-lg p-1.5",
+      modern: "rounded-lg",
+      elegant:
+        "border border-foreground/15 rounded-lg p-2.5 dark:border-foreground/10",
+      academic: "border-2 border-info/30 rounded-lg p-1.5",
+      minimal: "rounded-lg",
+      bold: "rounded-lg",
+    },
+  },
+  defaultVariants: { variant: "classic" },
+});
+
+const innerFrameVariants = cva(
+  "relative text-center p-8 sm:p-12 md:p-16 overflow-hidden",
+  {
+    variants: {
+      variant: {
+        classic: "border border-warning/25 rounded bg-warning/5",
+        modern:
+          "border border-primary/20 rounded-lg bg-linear-to-br from-primary/5 to-primary/8 border-t-[3px] border-t-primary/60",
+        elegant:
+          "border border-foreground/8 rounded bg-linear-to-b from-background to-muted/20 dark:border-foreground/5 dark:to-muted/10",
+        academic: "border border-info/15 rounded bg-info/3",
+        minimal: "border border-border rounded-lg bg-background",
+        bold: "border-[3px] border-primary rounded-lg bg-linear-to-br from-primary/8 to-purple/8",
+      },
+    },
+    defaultVariants: { variant: "classic" },
+  },
+);
+
+// ─── Corner ornaments ──────────────────────────────────────────
+
+interface CornerConfig {
+  size: number;
+  paths: { d: string; strokeWidth: number }[];
+  dots?: { cx: number; cy: number; r: number }[];
+  color: string;
+}
+
+const CORNER_CONFIGS: Record<CertificateVariant, CornerConfig | null> = {
+  classic: {
+    size: 40,
+    paths: [
+      { d: "M 2 38 L 2 10 Q 2 2 10 2 L 38 2", strokeWidth: 1.5 },
+      { d: "M 7 38 L 7 13 Q 7 7 13 7 L 38 7", strokeWidth: 0.75 },
+    ],
+    color: "text-warning/50",
+  },
+  modern: null,
+  elegant: {
+    size: 32,
+    paths: [{ d: "M 0 30 L 0 0 L 30 0", strokeWidth: 0.5 }],
+    dots: [{ cx: 2.5, cy: 2.5, r: 1.5 }],
+    color: "text-foreground/20",
+  },
+  academic: {
+    size: 36,
+    paths: [
+      { d: "M 0 36 L 0 0 L 36 0", strokeWidth: 2 },
+      { d: "M 5 36 L 5 5 L 36 5", strokeWidth: 1 },
+    ],
+    color: "text-info/35",
+  },
+  minimal: null,
+  bold: {
+    size: 20,
+    paths: [],
+    dots: [{ cx: 5, cy: 5, r: 5 }],
+    color: "text-primary/40",
+  },
 };
 
+const CORNER_POSITIONS = [
+  { key: "tl", pos: "top-3 left-3", transform: undefined },
+  { key: "tr", pos: "top-3 right-3", transform: "scaleX(-1)" },
+  { key: "bl", pos: "bottom-3 left-3", transform: "scaleY(-1)" },
+  { key: "br", pos: "bottom-3 right-3", transform: "scale(-1)" },
+] as const;
+
+function CornerOrnaments({ variant }: { variant: CertificateVariant }) {
+  const config = CORNER_CONFIGS[variant];
+  if (!config) return null;
+
+  return (
+    <>
+      {CORNER_POSITIONS.map(({ key, pos, transform }) => (
+        <svg
+          key={key}
+          className={cn("absolute pointer-events-none", pos, config.color)}
+          width={config.size}
+          height={config.size}
+          viewBox={`0 0 ${config.size} ${config.size}`}
+          fill="none"
+          stroke="currentColor"
+          style={transform ? { transform } : undefined}
+          aria-hidden="true"
+        >
+          {config.paths.map((p, i) => (
+            <path key={i} d={p.d} strokeWidth={p.strokeWidth} />
+          ))}
+          {config.dots?.map((dot, i) => (
+            <circle
+              key={`d${i}`}
+              cx={dot.cx}
+              cy={dot.cy}
+              r={dot.r}
+              fill="currentColor"
+              stroke="none"
+            />
+          ))}
+        </svg>
+      ))}
+    </>
+  );
+}
+
+// ─── Ornamental dividers ───────────────────────────────────────
+
+interface DividerConfig {
+  lineColor: string;
+  motif: React.ReactNode;
+}
+
+const DIVIDER_CONFIGS: Record<CertificateVariant, DividerConfig> = {
+  classic: {
+    lineColor: "bg-warning/30",
+    motif: (
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        className="text-warning/50 shrink-0"
+        aria-hidden="true"
+      >
+        <path d="M6 0 L12 6 L6 12 L0 6 Z" fill="currentColor" />
+      </svg>
+    ),
+  },
+  modern: {
+    lineColor: "bg-primary/20",
+    motif: (
+      <svg
+        width="8"
+        height="8"
+        viewBox="0 0 8 8"
+        className="text-primary/40 shrink-0"
+        aria-hidden="true"
+      >
+        <circle cx="4" cy="4" r="3" fill="currentColor" />
+      </svg>
+    ),
+  },
+  elegant: {
+    lineColor: "bg-foreground/10",
+    motif: (
+      <svg
+        width="10"
+        height="10"
+        viewBox="0 0 10 10"
+        className="text-foreground/15 shrink-0"
+        aria-hidden="true"
+      >
+        <path
+          d="M5 0 L6 4 L10 5 L6 6 L5 10 L4 6 L0 5 L4 4 Z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
+  },
+  academic: {
+    lineColor: "bg-info/25",
+    motif: (
+      <svg
+        width="10"
+        height="10"
+        viewBox="0 0 10 10"
+        className="text-info/40 shrink-0"
+        aria-hidden="true"
+      >
+        <path
+          d="M4 0 L6 0 L6 4 L10 4 L10 6 L6 6 L6 10 L4 10 L4 6 L0 6 L0 4 L4 4 Z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
+  },
+  minimal: {
+    lineColor: "bg-border",
+    motif: null,
+  },
+  bold: {
+    lineColor: "bg-primary/40",
+    motif: (
+      <svg
+        width="10"
+        height="10"
+        viewBox="0 0 10 10"
+        className="text-primary/50 shrink-0"
+        aria-hidden="true"
+      >
+        <rect x="1" y="1" width="8" height="8" fill="currentColor" />
+      </svg>
+    ),
+  },
+};
+
+function OrnamentalDivider({
+  variant,
+  className,
+}: {
+  variant: CertificateVariant;
+  className?: string;
+}) {
+  const config = DIVIDER_CONFIGS[variant];
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-3 my-5 mx-auto max-w-70",
+        className,
+      )}
+      role="separator"
+      aria-hidden="true"
+    >
+      <span className={cn("flex-1 h-px", config.lineColor)} />
+      {config.motif}
+      <span className={cn("flex-1 h-px", config.lineColor)} />
+    </div>
+  );
+}
+
+// ─── Background glow ───────────────────────────────────────────
+// Subtle radial glows using CSS vars for dark mode compat
+
+const BACKGROUND_GLOW: Record<
+  CertificateVariant,
+  React.CSSProperties | null
+> = {
+  classic: {
+    background:
+      "radial-gradient(ellipse at center, var(--color-warning) 0%, transparent 65%)",
+    opacity: 0.06,
+  },
+  modern: null,
+  elegant: {
+    background:
+      "radial-gradient(ellipse at center, var(--color-foreground) 0%, transparent 70%)",
+    opacity: 0.03,
+  },
+  academic: {
+    background:
+      "radial-gradient(ellipse at center, var(--color-info) 0%, transparent 65%)",
+    opacity: 0.05,
+  },
+  minimal: null,
+  bold: {
+    background:
+      "radial-gradient(ellipse at 30% 50%, var(--color-primary) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, var(--color-purple) 0%, transparent 50%)",
+    opacity: 0.06,
+  },
+};
+
+// ─── Typography maps ───────────────────────────────────────────
+
+const ICON_COLORS: Record<CertificateVariant, string> = {
+  classic: "text-warning",
+  modern: "text-primary",
+  elegant: "text-foreground/60",
+  academic: "text-info",
+  minimal: "text-muted-foreground",
+  bold: "text-primary",
+};
+
+const HEADING_STYLES: Record<CertificateVariant, string> = {
+  classic:
+    "uppercase tracking-[4px] text-base font-medium text-foreground/80 font-serif",
+  modern: "uppercase tracking-[3px] text-base font-medium text-primary/80",
+  elegant:
+    "uppercase tracking-[5px] text-sm font-light text-foreground/50",
+  academic:
+    "uppercase tracking-[3px] text-base font-semibold text-info/80",
+  minimal:
+    "uppercase tracking-[2px] text-sm font-normal text-muted-foreground",
+  bold: "uppercase tracking-[3px] text-lg font-black text-primary",
+};
+
+const COURSE_TITLE_COLORS: Record<CertificateVariant, string> = {
+  classic: "text-warning",
+  modern: "text-primary",
+  elegant: "text-foreground/80",
+  academic: "text-info",
+  minimal: "text-foreground",
+  bold: "text-primary",
+};
+
+const SERIF_VARIANTS: ReadonlySet<CertificateVariant> = new Set([
+  "classic",
+  "elegant",
+  "academic",
+]);
+
+// ─── Main component ────────────────────────────────────────────
+
 export function CertificateViewer({
   recipientName,
   courseTitle,
@@ -45,63 +350,111 @@ export function CertificateViewer({
     }
   }
 
+  const glowStyle = BACKGROUND_GLOW[variant];
+
   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>
-        )}
+      {/* Outer certificate frame */}
+      <div className={outerFrameVariants({ variant })}>
+        {/* Inner certificate frame */}
+        <div className={innerFrameVariants({ variant })}>
+          {/* Corner ornaments */}
+          <CornerOrnaments variant={variant} />
+
+          {/* Background radial glow */}
+          {glowStyle && (
+            <div
+              className="absolute inset-0 pointer-events-none rounded-[inherit]"
+              style={glowStyle}
+              aria-hidden="true"
+            />
+          )}
+
+          {/* Content */}
+          <div className="relative">
+            {/* Logo / Icon */}
+            {organizationLogo ? (
+              <img
+                src={organizationLogo}
+                alt={organizationName}
+                className="h-20 mb-4 mx-auto block"
+              />
+            ) : (
+              <Award
+                size={64}
+                className={cn("mx-auto mb-6", ICON_COLORS[variant])}
+              />
+            )}
+
+            {/* Certificate heading */}
+            <p className={cn("mb-2", HEADING_STYLES[variant])}>
+              Certificate of Completion
+            </p>
+
+            {/* Top ornamental divider */}
+            <OrnamentalDivider variant={variant} />
+
+            {/* Certify text */}
+            <p className="text-base text-foreground/70 mb-2">
+              This is to certify that
+            </p>
 
-        {certificateId && (
-          <span className="block text-xs text-muted-foreground mt-2">
-            Certificate ID: {certificateId}
-          </span>
-        )}
+            {/* Recipient name */}
+            <p
+              className={cn(
+                "text-4xl font-bold mb-4 text-foreground",
+                SERIF_VARIANTS.has(variant) && "font-serif",
+              )}
+            >
+              {recipientName}
+            </p>
+
+            {/* Completion text */}
+            <p className="text-base text-foreground/70 mb-2">
+              has successfully completed
+            </p>
+
+            {/* Course title */}
+            <p
+              className={cn(
+                "text-2xl font-semibold mb-4",
+                COURSE_TITLE_COLORS[variant],
+              )}
+            >
+              {courseTitle}
+            </p>
+
+            {/* Issuance line */}
+            <p className="text-base text-foreground/60 mb-6">
+              Issued by {organizationName} on {formattedDate}
+            </p>
+
+            {/* Signatory */}
+            {signatory && (
+              <div className="mt-6 mb-4">
+                <OrnamentalDivider variant={variant} />
+                <p className="font-semibold text-base text-foreground">
+                  {signatory.name}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {signatory.title}
+                </p>
+              </div>
+            )}
+
+            {/* Certificate ID */}
+            {certificateId && (
+              <span className="block text-xs text-muted-foreground mt-4">
+                Certificate ID: {certificateId}
+              </span>
+            )}
+          </div>
+        </div>
       </div>
 
       {/* Actions */}
       {showActions && (
-        <div className="flex justify-center gap-2 mt-3">
+        <div className="flex justify-center gap-3 mt-6">
           <Button variant="outline" onClick={handlePrint}>
             <Printer size={16} /> Print
           </Button>

package/src/sections/CertificateViewer/types.ts

@@ -1,10 +1,18 @@
+/** Available certificate visual styles */
+export type CertificateVariant =
+  | "classic"
+  | "modern"
+  | "elegant"
+  | "academic"
+  | "minimal"
+  | "bold";
 
 /**
  * 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.
+ * signatory, and verification ID. Supports six visual variants:
+ * classic, modern, elegant, academic, minimal, and bold.
  *
  * @example
  * <CertificateViewer
@@ -12,7 +20,7 @@
  *   courseTitle="Advanced React"
  *   completionDate="2025-03-01"
  *   organizationName="HydraLMS Academy"
- *   variant="modern"
+ *   variant="elegant"
  * />
  */
 export interface CertificateViewerProps {
@@ -30,8 +38,8 @@ export interface CertificateViewerProps {
   signatory?: { name: string; title: string };
   /** Unique certificate ID */
   certificateId?: string;
-  /** Certificate template variant */
-  variant?: "classic" | "modern" | "minimal";
+  /** Certificate template variant @default "classic" */
+  variant?: CertificateVariant;
   /** Whether to show print/download actions */
   showActions?: boolean;
   /** Called when print is triggered */

package/src/sections/CourseOutline/CourseOutline.tsx

@@ -1,22 +1,11 @@
 import { useMemo } from "react";
 import { CurriculumTree } from "../../curriculum";
-import type { CurriculumItem } from "../../curriculum/types";
 import { Progress } from "../../ui/progress";
+import { Separator } from "../../ui/separator";
+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,
@@ -48,7 +37,7 @@ export function CourseOutline({
   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 +53,7 @@ export function CourseOutline({
           )}
         </div>
       )}
+      {(courseTitle || showOverallProgress) && <Separator />}
       <CurriculumTree
         items={items}
         progress={progress}

package/src/sections/DiscussionThread/DiscussionThread.tsx

@@ -2,7 +2,9 @@ import { useMemo, useState } from "react";
 import { CheckCircle, Heart, MessageSquare, Reply } from "lucide-react";
 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";
@@ -48,8 +50,8 @@ export function DiscussionThread({
   }, [replies, rootPost.uid, sortOrder]);
 
   function handleSubmitReply(parentUid: string) {
-    if (!replyContent.trim()) return;
-    onReply(parentUid, replyContent.trim());
+    if (isEmptyHtml(replyContent)) return;
+    onReply(parentUid, replyContent);
     setReplyContent("");
     setReplyingToUid(null);
   }
@@ -132,18 +134,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 +173,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" />