@vllnt/ui 0.2.1 → 0.3.0-canary.f3cafe8

package/dist/components/progress-tracker/progress-tracker.js

@@ -0,0 +1,537 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "../card/card";
+import {
+  CHECKLIST_PROGRESS_EVENT,
+  parseChecklistStorageValue
+} from "../checklist/checklist";
+import { ProgressBar } from "../progress-bar/progress-bar";
+const ProgressTrackerContext = React.createContext(null);
+function clampPercentage(value) {
+  if (Number.isNaN(value)) return 0;
+  if (value <= 1) return Math.round(Math.max(0, value) * 100);
+  return Math.round(Math.min(Math.max(0, value), 100));
+}
+const STATUS_LABELS = {
+  available: "Available",
+  completed: "Completed",
+  "in-progress": "In progress",
+  locked: "Locked"
+};
+const STATUS_CLASSES = {
+  available: "border-secondary bg-secondary text-secondary-foreground",
+  completed: "border-primary/20 bg-primary text-primary-foreground",
+  "in-progress": "border-primary/20 bg-primary/10 text-primary",
+  locked: "border-border bg-muted text-muted-foreground"
+};
+function getStatusLabel(status) {
+  return STATUS_LABELS[status];
+}
+function getStatusClasses(status) {
+  return STATUS_CLASSES[status];
+}
+function readPersistedChecklistItems(persistKey) {
+  if (!persistKey || typeof window === "undefined") return [];
+  try {
+    const saved = localStorage.getItem(`checklist:${persistKey}`);
+    if (!saved) return [];
+    return parseChecklistStorageValue(saved);
+  } catch {
+    return [];
+  }
+}
+function areStringArraysEqual(left, right) {
+  return left.length === right.length && left.every((value, index) => value === right[index]);
+}
+function getChecklistPersistKey(event) {
+  if (!(event instanceof CustomEvent)) return null;
+  const detail = event.detail;
+  if (typeof detail !== "object" || detail === null) return null;
+  if (!("persistKey" in detail)) return null;
+  const { persistKey } = detail;
+  return typeof persistKey === "string" ? persistKey : null;
+}
+function getResolvedLessonProgress(module) {
+  if (!module.persistKey || !module.checklistItems?.length) {
+    return {
+      completedLessons: module.completedLessons ?? 0,
+      totalLessons: module.lessons
+    };
+  }
+  const validIds = new Set(module.checklistItems.map((item) => item.id));
+  const persistedIds = readPersistedChecklistItems(module.persistKey);
+  const completedLessons = persistedIds.filter((id) => validIds.has(id)).length;
+  return {
+    completedLessons,
+    totalLessons: module.checklistItems.length
+  };
+}
+function useChecklistProgress(checklistItems = [], persistKey) {
+  const total = checklistItems.length;
+  const [persistedIds, setPersistedIds] = React.useState(
+    () => readPersistedChecklistItems(persistKey)
+  );
+  const [trackedPersistKey, setTrackedPersistKey] = React.useState(persistKey);
+  const setPersistedIdsIfChanged = React.useCallback((nextIds) => {
+    setPersistedIds(
+      (currentIds) => areStringArraysEqual(currentIds, nextIds) ? currentIds : nextIds
+    );
+  }, []);
+  if (trackedPersistKey !== persistKey) {
+    setTrackedPersistKey(persistKey);
+    setPersistedIdsIfChanged(readPersistedChecklistItems(persistKey));
+  }
+  React.useEffect(() => {
+    if (!persistKey || typeof window === "undefined") return;
+    const sync = (event) => {
+      const eventPersistKey = getChecklistPersistKey(event);
+      if (eventPersistKey && eventPersistKey !== persistKey) return;
+      setPersistedIdsIfChanged(readPersistedChecklistItems(persistKey));
+    };
+    const syncEventListener = (event) => {
+      sync(event);
+    };
+    window.addEventListener("storage", sync);
+    window.addEventListener("focus", sync);
+    window.addEventListener(CHECKLIST_PROGRESS_EVENT, syncEventListener);
+    return () => {
+      window.removeEventListener("storage", sync);
+      window.removeEventListener("focus", sync);
+      window.removeEventListener(CHECKLIST_PROGRESS_EVENT, syncEventListener);
+    };
+  }, [persistKey, setPersistedIdsIfChanged]);
+  if (!persistKey || total === 0) return null;
+  const validIds = new Set(checklistItems.map((item) => item.id));
+  const completedCount = persistedIds.filter((id) => validIds.has(id)).length;
+  return {
+    completedCount,
+    progress: total > 0 ? Math.round(completedCount / total * 100) : 0,
+    total
+  };
+}
+function useProgressTrackerContext() {
+  const context = React.useContext(ProgressTrackerContext);
+  if (!context) {
+    throw new Error(
+      "ProgressTracker compound components must be used within <ProgressTracker />."
+    );
+  }
+  return context;
+}
+const EMPTY_PROGRESS_TRACKER_MODULES = [];
+const EMPTY_PROGRESS_TRACKER_SKILLS = [];
+function ProgressTrackerRoot({
+  children,
+  className,
+  modules = EMPTY_PROGRESS_TRACKER_MODULES,
+  overallProgress,
+  streak = 0,
+  title = "Learning progress",
+  ...props
+}) {
+  const contextValue = React.useMemo(
+    () => ({
+      modules,
+      overallProgress: clampPercentage(overallProgress),
+      streak,
+      title
+    }),
+    [modules, overallProgress, streak, title]
+  );
+  return /* @__PURE__ */ jsx(ProgressTrackerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-label": title,
+      className: cn("grid gap-6", className),
+      ...props,
+      children
+    }
+  ) });
+}
+function ProgressTrackerOverview({
+  className,
+  description = "Track completion across modules, lessons, and exercises.",
+  label = "Overall progress",
+  ...props
+}) {
+  const { modules, overallProgress, streak, title } = useProgressTrackerContext();
+  const trackedPersistKeys = React.useMemo(
+    () => modules.reduce((keys, module) => {
+      if (module.persistKey) {
+        keys.push(module.persistKey);
+      }
+      return keys;
+    }, []),
+    [modules]
+  );
+  const [, forceChecklistRefresh] = React.useState(0);
+  React.useEffect(() => {
+    if (trackedPersistKeys.length === 0 || typeof window === "undefined") {
+      return;
+    }
+    const trackedKeys = new Set(trackedPersistKeys);
+    const sync = (event) => {
+      const eventPersistKey = getChecklistPersistKey(event);
+      if (eventPersistKey && !trackedKeys.has(eventPersistKey)) return;
+      forceChecklistRefresh((version) => version + 1);
+    };
+    const syncEventListener = (event) => {
+      sync(event);
+    };
+    window.addEventListener("storage", sync);
+    window.addEventListener("focus", sync);
+    window.addEventListener(CHECKLIST_PROGRESS_EVENT, syncEventListener);
+    return () => {
+      window.removeEventListener("storage", sync);
+      window.removeEventListener("focus", sync);
+      window.removeEventListener(CHECKLIST_PROGRESS_EVENT, syncEventListener);
+    };
+  }, [trackedPersistKeys]);
+  const radius = 54;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - overallProgress / 100 * circumference;
+  const completedModules = modules.filter(
+    (module) => module.status === "completed"
+  ).length;
+  const lessonTotals = modules.reduce(
+    (totals, module) => {
+      const resolvedProgress = getResolvedLessonProgress(module);
+      return {
+        completedLessons: totals.completedLessons + resolvedProgress.completedLessons,
+        totalLessons: totals.totalLessons + resolvedProgress.totalLessons
+      };
+    },
+    { completedLessons: 0, totalLessons: 0 }
+  );
+  const totalLessons = lessonTotals.totalLessons;
+  const completedLessons = lessonTotals.completedLessons;
+  const totalExercises = modules.reduce(
+    (sum, module) => sum + (module.exercises ?? 0),
+    0
+  );
+  const completedExercises = modules.reduce(
+    (sum, module) => sum + (module.completedExercises ?? 0),
+    0
+  );
+  return /* @__PURE__ */ jsxs(Card, { className: cn("overflow-hidden", className), ...props, children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "gap-4 sm:flex-row sm:items-start sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Badge, { className: "w-fit", variant: "secondary", children: label }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(CardTitle, { children: title }),
+          /* @__PURE__ */ jsx(CardDescription, { children: description })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-full border bg-background px-3 py-1 text-sm text-muted-foreground whitespace-nowrap", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "inline-flex size-2.5 rounded-full bg-primary"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: streak }),
+          " day",
+          streak === 1 ? "" : "s",
+          " streak"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "grid gap-6 lg:grid-cols-[auto,1fr] lg:items-center", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mx-auto flex flex-col items-center gap-3 text-center", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex size-36 items-center justify-center", children: [
+          /* @__PURE__ */ jsxs("svg", { className: "size-36 -rotate-90", viewBox: "0 0 120 120", children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: "stroke-muted",
+                cx: "60",
+                cy: "60",
+                fill: "none",
+                r: radius,
+                strokeWidth: "10"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                "aria-label": label,
+                "aria-valuemax": 100,
+                "aria-valuemin": 0,
+                "aria-valuenow": overallProgress,
+                className: "stroke-primary transition-all duration-500",
+                cx: "60",
+                cy: "60",
+                fill: "none",
+                r: radius,
+                role: "progressbar",
+                strokeDasharray: circumference,
+                strokeDashoffset: offset,
+                strokeLinecap: "round",
+                strokeWidth: "10"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-3xl font-semibold text-foreground", children: [
+              overallProgress,
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs uppercase tracking-[0.2em] text-muted-foreground", children: "Complete" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "max-w-52 text-sm text-muted-foreground", children: [
+          completedModules,
+          " of ",
+          modules.length,
+          " modules completed."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("dl", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-muted/30 p-4", children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-sm text-muted-foreground", children: "Modules" }),
+          /* @__PURE__ */ jsxs("dd", { className: "mt-2 text-2xl font-semibold text-foreground", children: [
+            completedModules,
+            "/",
+            modules.length
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-muted/30 p-4", children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-sm text-muted-foreground", children: "Lessons" }),
+          /* @__PURE__ */ jsxs("dd", { className: "mt-2 text-2xl font-semibold text-foreground", children: [
+            completedLessons,
+            "/",
+            totalLessons
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-muted/30 p-4", children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-sm text-muted-foreground", children: "Exercises" }),
+          /* @__PURE__ */ jsxs("dd", { className: "mt-2 text-2xl font-semibold text-foreground", children: [
+            completedExercises,
+            "/",
+            totalExercises
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-muted/30 p-4", children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-sm text-muted-foreground", children: "Momentum" }),
+          /* @__PURE__ */ jsxs("dd", { className: "mt-2 text-2xl font-semibold text-foreground", children: [
+            streak,
+            " day",
+            streak === 1 ? "" : "s"
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ProgressTrackerModules({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid gap-4 md:grid-cols-2 xl:grid-cols-3", className),
+      ...props,
+      children
+    }
+  );
+}
+function ProgressTrackerModule({
+  badge,
+  checklistItems,
+  className,
+  completedExercises,
+  completedLessons = 0,
+  currentLesson,
+  description,
+  exercises,
+  href,
+  id,
+  lessons,
+  persistKey,
+  progress,
+  skills = EMPTY_PROGRESS_TRACKER_SKILLS,
+  status,
+  timeSpent,
+  title,
+  ...props
+}) {
+  const checklistProgress = useChecklistProgress(checklistItems, persistKey);
+  const resolvedLessons = checklistProgress?.completedCount ?? completedLessons;
+  const resolvedLessonTotal = checklistProgress?.total || lessons;
+  const progressPercent = checklistProgress?.progress ?? clampPercentage(progress);
+  const progressValue = Math.min(resolvedLessons, resolvedLessonTotal);
+  const safeExerciseTotal = exercises ?? 0;
+  const safeExerciseComplete = Math.min(
+    completedExercises ?? 0,
+    safeExerciseTotal
+  );
+  const card = /* @__PURE__ */ jsxs(
+    Card,
+    {
+      "aria-disabled": status === "locked",
+      className: cn(
+        "h-full",
+        status === "locked" && "opacity-80",
+        href && "transition-shadow hover:shadow-md focus-within:shadow-md",
+        className
+      ),
+      id,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx(CardTitle, { className: "text-xl", children: title }),
+              description ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null
+            ] }),
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                className: cn("whitespace-nowrap", getStatusClasses(status)),
+                variant: "outline",
+                children: getStatusLabel(status)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+            badge ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: badge }) : null,
+            currentLesson ? /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
+              "Current: ",
+              currentLesson
+            ] }) : null,
+            timeSpent ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: timeSpent }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-label": `${title} progress`,
+                "aria-valuemax": 100,
+                "aria-valuemin": 0,
+                "aria-valuenow": progressPercent,
+                role: "progressbar",
+                children: /* @__PURE__ */ jsx(
+                  ProgressBar,
+                  {
+                    completedLabel: "lessons",
+                    currentLabel: `${progressPercent}% complete`,
+                    isComplete: status === "completed",
+                    max: resolvedLessonTotal,
+                    showLabels: true,
+                    value: progressValue
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-2 text-sm text-muted-foreground sm:grid-cols-2", children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Lessons:",
+                " ",
+                /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", children: [
+                  resolvedLessons,
+                  "/",
+                  resolvedLessonTotal
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Exercises:",
+                " ",
+                /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", children: [
+                  safeExerciseComplete,
+                  "/",
+                  safeExerciseTotal
+                ] })
+              ] })
+            ] })
+          ] }),
+          skills.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: skills.map((skill) => /* @__PURE__ */ jsx(ProgressTrackerBadge, { children: skill }, skill)) }) : null
+        ] })
+      ]
+    }
+  );
+  if (!href || status === "locked") return card;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: "block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      href,
+      children: card
+    }
+  );
+}
+function ProgressTrackerStats({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid gap-4 sm:grid-cols-2 xl:grid-cols-4", className),
+      ...props,
+      children
+    }
+  );
+}
+function ProgressTrackerStat({
+  className,
+  label,
+  value,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Card, { className: cn("h-full", className), ...props, children: /* @__PURE__ */ jsxs(CardContent, { className: "flex h-full flex-col justify-center gap-2 p-6", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold text-foreground", children: value })
+  ] }) });
+}
+function ProgressTrackerBadge({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      className: cn(
+        "px-3 py-1 text-[11px] uppercase tracking-wide whitespace-nowrap",
+        className
+      ),
+      variant: "secondary",
+      ...props,
+      children
+    }
+  );
+}
+const ProgressTracker = Object.assign(ProgressTrackerRoot, {
+  Badge: ProgressTrackerBadge,
+  Module: ProgressTrackerModule,
+  Modules: ProgressTrackerModules,
+  Overview: ProgressTrackerOverview,
+  Stat: ProgressTrackerStat,
+  Stats: ProgressTrackerStats
+});
+export {
+  ProgressTracker,
+  ProgressTrackerBadge,
+  ProgressTrackerModule,
+  ProgressTrackerModules,
+  ProgressTrackerOverview,
+  ProgressTrackerStat,
+  ProgressTrackerStats,
+  useProgressTrackerContext
+};

package/dist/components/prompt-templates/index.js

@@ -0,0 +1,6 @@
+import {
+  PromptTemplates
+} from "./prompt-templates";
+export {
+  PromptTemplates
+};