@hydralms/components 0.2.0 → 0.3.1

package/src/sections/CertificateViewer/CertificateViewer.tsx

@@ -1,12 +1,23 @@
+import { useMemo } from "react";
 import { Award, Download, Printer } from "lucide-react";
 import { cva } from "class-variance-authority";
+import { Skeleton } from "../../ui/skeleton";
 import { Button } from "../../ui/button";
 import type { CertificateViewerProps, CertificateVariant } from "./types";
 import { cn } from "../../lib/utils";
+import { SectionShell } from "../_shared/section-shell";
+import {
+  CORNER_CONFIGS,
+  CORNER_POSITIONS,
+  DIVIDER_CONFIGS,
+  BACKGROUND_GLOW,
+  ICON_COLORS,
+  HEADING_STYLES,
+  COURSE_TITLE_COLORS,
+  SERIF_VARIANTS,
+} from "./certificate-variants";
 
 // ─── 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: {
@@ -36,61 +47,14 @@ const innerFrameVariants = cva(
           "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",
+        bold: "border-[3px] border-primary rounded-lg bg-linear-to-br from-primary/8 to-palette-0/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;
+// ─── Sub-components ─────────────────────────────────────────────
 
 function CornerOrnaments({ variant }: { variant: CertificateVariant }) {
   const config = CORNER_CONFIGS[variant];
@@ -129,96 +93,6 @@ function CornerOrnaments({ variant }: { variant: CertificateVariant }) {
   );
 }
 
-// ─── 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,
@@ -243,76 +117,6 @@ function OrnamentalDivider({
   );
 }
 
-// ─── 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({
@@ -327,10 +131,13 @@ export function CertificateViewer({
   showActions = true,
   onPrint,
   onDownload,
+  isLoading,
+  error,
+  onRetry,
   className,
   style,
 }: CertificateViewerProps) {
-  const formattedDate = (() => {
+  const formattedDate = useMemo(() => {
     try {
       return new Date(completionDate).toLocaleDateString("en-US", {
         year: "numeric",
@@ -340,7 +147,7 @@ export function CertificateViewer({
     } catch {
       return completionDate;
     }
-  })();
+  }, [completionDate]);
 
   function handlePrint() {
     if (onPrint) {
@@ -353,15 +160,21 @@ export function CertificateViewer({
   const glowStyle = BACKGROUND_GLOW[variant];
 
   return (
+    <SectionShell
+      isLoading={isLoading}
+      error={error}
+      onRetry={onRetry}
+      className={className}
+      style={style}
+      skeleton={<Skeleton className="h-80 w-full rounded-lg border" />}
+    >
     <div className={className} style={style}>
       {/* 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]"
@@ -370,9 +183,7 @@ export function CertificateViewer({
             />
           )}
 
-          {/* Content */}
           <div className="relative">
-            {/* Logo / Icon */}
             {organizationLogo ? (
               <img
                 src={organizationLogo}
@@ -386,20 +197,16 @@ export function CertificateViewer({
               />
             )}
 
-            {/* 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>
 
-            {/* Recipient name */}
             <p
               className={cn(
                 "text-4xl font-bold mb-4 text-foreground",
@@ -409,12 +216,10 @@ export function CertificateViewer({
               {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",
@@ -424,12 +229,10 @@ export function CertificateViewer({
               {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} />
@@ -442,7 +245,6 @@ export function CertificateViewer({
               </div>
             )}
 
-            {/* Certificate ID */}
             {certificateId && (
               <span className="block text-xs text-muted-foreground mt-4">
                 Certificate ID: {certificateId}
@@ -452,7 +254,6 @@ export function CertificateViewer({
         </div>
       </div>
 
-      {/* Actions */}
       {showActions && (
         <div className="flex justify-center gap-3 mt-6">
           <Button variant="outline" onClick={handlePrint}>
@@ -466,5 +267,6 @@ export function CertificateViewer({
         </div>
       )}
     </div>
+    </SectionShell>
   );
 }

package/src/sections/CertificateViewer/certificate-variants.tsx

@@ -0,0 +1,170 @@
+import type { CertificateVariant } from "./types";
+
+// ─── Corner ornaments ──────────────────────────────────────────
+
+export interface CornerConfig {
+  size: number;
+  paths: { d: string; strokeWidth: number }[];
+  dots?: { cx: number; cy: number; r: number }[];
+  color: string;
+}
+
+export 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",
+  },
+};
+
+export 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;
+
+// ─── Divider configs ────────────────────────────────────────────
+
+export interface DividerConfig {
+  lineColor: string;
+  motif: React.ReactNode;
+}
+
+export 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>
+    ),
+  },
+};
+
+// ─── Background glow ────────────────────────────────────────────
+
+export 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-palette-0) 0%, transparent 50%)",
+    opacity: 0.06,
+  },
+};
+
+// ─── Typography maps ────────────────────────────────────────────
+
+export 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",
+};
+
+export 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",
+};
+
+export 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",
+};
+
+export const SERIF_VARIANTS: ReadonlySet<CertificateVariant> = new Set([
+  "classic",
+  "elegant",
+  "academic",
+]);

package/src/sections/CertificateViewer/types.ts

@@ -46,6 +46,12 @@ export interface CertificateViewerProps {
   onPrint?: () => void;
   /** Called when download is triggered */
   onDownload?: () => void;
+  /** 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 */