@contractspec/example.learning-journey-ui-shared 1.56.1 → 1.58.0

package/dist/index.js

@@ -1,11 +1,331 @@
-import example_default from "./example.js";
-import { useLearningProgress } from "./hooks/useLearningProgress.js";
-import "./hooks/index.js";
-import { XpBar } from "./components/XpBar.js";
-import { StreakCounter } from "./components/StreakCounter.js";
-import { BadgeDisplay } from "./components/BadgeDisplay.js";
-import { ViewTabs } from "./components/ViewTabs.js";
-import "./components/index.js";
-import "./docs/index.js";
-
-export { BadgeDisplay, StreakCounter, ViewTabs, XpBar, example_default as example, useLearningProgress };
+// @bun
+// src/components/BadgeDisplay.tsx
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var BADGE_ICONS = {
+  studio_first_30m: "\uD83C\uDFAF",
+  platform_tour: "\uD83D\uDDFA\uFE0F",
+  crm_first_win: "\uD83C\uDFC6",
+  drill_master: "\uD83E\uDDE0",
+  coach_listener: "\uD83D\uDC42",
+  quest_complete: "\u2B50",
+  streak_7: "\uD83D\uDD25",
+  streak_30: "\uD83D\uDC8E",
+  default: "\uD83C\uDFC5"
+};
+var sizeStyles = {
+  sm: "h-6 w-6 text-sm",
+  md: "h-8 w-8 text-base",
+  lg: "h-10 w-10 text-lg"
+};
+function BadgeDisplay({
+  badges,
+  maxVisible = 5,
+  size = "md"
+}) {
+  const visibleBadges = badges.slice(0, maxVisible);
+  const hiddenCount = badges.length - maxVisible;
+  if (badges.length === 0) {
+    return /* @__PURE__ */ jsxDEV("div", {
+      className: "text-muted-foreground text-sm",
+      children: "No badges earned yet"
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "flex items-center gap-1",
+    children: [
+      visibleBadges.map((badge) => /* @__PURE__ */ jsxDEV("div", {
+        className: cn("flex items-center justify-center rounded-full bg-gradient-to-br from-amber-400/20 to-amber-600/20", sizeStyles[size]),
+        title: badge.replace(/_/g, " "),
+        children: BADGE_ICONS[badge] ?? BADGE_ICONS.default
+      }, badge, false, undefined, this)),
+      hiddenCount > 0 && /* @__PURE__ */ jsxDEV("div", {
+        className: cn("text-muted-foreground bg-muted flex items-center justify-center rounded-full", sizeStyles[size], "text-xs font-medium"),
+        children: [
+          "+",
+          hiddenCount
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/StreakCounter.tsx
+import { cn as cn2 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+var sizeStyles2 = {
+  sm: {
+    container: "gap-1 px-2 py-1",
+    icon: "text-base",
+    text: "text-xs"
+  },
+  md: {
+    container: "gap-1.5 px-3 py-1.5",
+    icon: "text-lg",
+    text: "text-sm"
+  },
+  lg: {
+    container: "gap-2 px-4 py-2",
+    icon: "text-xl",
+    text: "text-base"
+  }
+};
+function StreakCounter({
+  days,
+  isActive = true,
+  size = "md"
+}) {
+  const styles = sizeStyles2[size];
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: cn2("inline-flex items-center rounded-full font-semibold", styles.container, isActive ? "bg-orange-500/10 text-orange-500" : "bg-muted text-muted-foreground"),
+    children: [
+      /* @__PURE__ */ jsxDEV2("span", {
+        className: styles.icon,
+        role: "img",
+        "aria-label": "streak",
+        children: "\uD83D\uDD25"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("span", {
+        className: styles.text,
+        children: [
+          days,
+          " ",
+          days === 1 ? "day" : "days"
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/ViewTabs.tsx
+import { Button } from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+var VIEW_LABELS = {
+  overview: { label: "Overview", icon: "\uD83D\uDCCA" },
+  steps: { label: "Steps", icon: "\uD83D\uDCDD" },
+  progress: { label: "Progress", icon: "\uD83D\uDCC8" },
+  timeline: { label: "Timeline", icon: "\uD83D\uDCC5" }
+};
+var DEFAULT_VIEWS = [
+  "overview",
+  "steps",
+  "progress",
+  "timeline"
+];
+function ViewTabs({
+  currentView,
+  onViewChange,
+  availableViews = DEFAULT_VIEWS
+}) {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "flex flex-wrap gap-2",
+    children: availableViews.map((view) => {
+      const { label, icon } = VIEW_LABELS[view];
+      const isActive = currentView === view;
+      return /* @__PURE__ */ jsxDEV3(Button, {
+        variant: isActive ? "default" : "outline",
+        size: "sm",
+        onClick: () => onViewChange(view),
+        className: "gap-1.5",
+        children: [
+          /* @__PURE__ */ jsxDEV3("span", {
+            children: icon
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("span", {
+            children: label
+          }, undefined, false, undefined, this)
+        ]
+      }, view, true, undefined, this);
+    })
+  }, undefined, false, undefined, this);
+}
+
+// src/components/XpBar.tsx
+import { Progress } from "@contractspec/lib.ui-kit-web/ui/progress";
+import { cn as cn3 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+"use client";
+var sizeStyles3 = {
+  sm: "h-2",
+  md: "h-3",
+  lg: "h-4"
+};
+var labelSizeStyles = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+function XpBar({
+  current,
+  max,
+  level,
+  showLabel = true,
+  size = "md"
+}) {
+  const percentage = max > 0 ? Math.min(current / max * 100, 100) : 0;
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: "w-full space-y-1",
+    children: [
+      showLabel && /* @__PURE__ */ jsxDEV4("div", {
+        className: cn3("flex items-center justify-between", labelSizeStyles[size]),
+        children: [
+          /* @__PURE__ */ jsxDEV4("span", {
+            className: "text-muted-foreground font-medium",
+            children: [
+              level !== undefined && /* @__PURE__ */ jsxDEV4("span", {
+                className: "text-primary mr-1",
+                children: [
+                  "Lvl ",
+                  level
+                ]
+              }, undefined, true, undefined, this),
+              "XP"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV4("span", {
+            className: "font-semibold",
+            children: [
+              current.toLocaleString(),
+              " / ",
+              max.toLocaleString()
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4(Progress, {
+        value: percentage,
+        className: cn3("bg-muted", sizeStyles3[size])
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+// src/docs/learning-journey-ui-shared.docblock.ts
+import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
+var blocks = [
+  {
+    id: "docs.examples.learning-journey-ui-shared",
+    title: "Learning Journey UI \u2014 Shared",
+    summary: "Shared UI components and hooks for learning journey mini-apps.",
+    kind: "reference",
+    visibility: "public",
+    route: "/docs/examples/learning-journey-ui-shared",
+    tags: ["learning", "ui", "shared"],
+    body: `## Includes
+- Hooks: useLearningProgress
+- Components: XpBar, StreakCounter, BadgeDisplay, ViewTabs
+
+## Notes
+- Keep components accessible (labels, focus, contrast).
+- Prefer design-system tokens and components.`
+  }
+];
+registerDocBlocks(blocks);
+// src/example.ts
+import { defineExample } from "@contractspec/lib.contracts";
+var example = defineExample({
+  meta: {
+    key: "learning-journey-ui-shared",
+    version: "1.0.0",
+    title: "Learning Journey UI \u2014 Shared",
+    description: "Shared UI components and hooks for learning journey mini-apps.",
+    kind: "ui",
+    visibility: "public",
+    stability: "experimental",
+    owners: ["@platform.core"],
+    tags: ["learning", "ui", "shared"]
+  },
+  docs: {
+    rootDocId: "docs.examples.learning-journey-ui-shared"
+  },
+  entrypoints: {
+    packageName: "@contractspec/example.learning-journey-ui-shared",
+    docs: "./docs"
+  },
+  surfaces: {
+    templates: true,
+    sandbox: { enabled: true, modes: ["playground", "markdown"] },
+    studio: { enabled: true, installable: true },
+    mcp: { enabled: true }
+  }
+});
+var example_default = example;
+
+// src/hooks/useLearningProgress.ts
+import { useState, useCallback, useMemo } from "react";
+"use client";
+function createDefaultProgress(trackId) {
+  return {
+    trackId,
+    completedStepIds: [],
+    currentStepId: null,
+    xpEarned: 0,
+    streakDays: 0,
+    lastActivityDate: null,
+    badges: []
+  };
+}
+function useLearningProgress(track) {
+  const [progress, setProgress] = useState(() => createDefaultProgress(track.id));
+  const completeStep = useCallback((stepId) => {
+    const step = track.steps.find((s) => s.id === stepId);
+    if (!step || progress.completedStepIds.includes(stepId))
+      return;
+    setProgress((prev) => {
+      const newCompletedIds = [...prev.completedStepIds, stepId];
+      const xpReward = step.xpReward ?? 0;
+      const nextStep = track.steps.find((s) => !newCompletedIds.includes(s.id));
+      const isTrackComplete = newCompletedIds.length === track.steps.length;
+      const completionBonus = isTrackComplete ? track.completionRewards?.xpBonus ?? 0 : 0;
+      return {
+        ...prev,
+        completedStepIds: newCompletedIds,
+        currentStepId: nextStep?.id ?? null,
+        xpEarned: prev.xpEarned + xpReward + completionBonus,
+        lastActivityDate: new Date().toISOString(),
+        badges: isTrackComplete && track.completionRewards?.badgeKey ? [...prev.badges, track.completionRewards.badgeKey] : prev.badges
+      };
+    });
+  }, [track, progress.completedStepIds]);
+  const resetProgress = useCallback(() => {
+    setProgress(createDefaultProgress(track.id));
+  }, [track.id]);
+  const incrementStreak = useCallback(() => {
+    setProgress((prev) => ({
+      ...prev,
+      streakDays: prev.streakDays + 1,
+      lastActivityDate: new Date().toISOString()
+    }));
+  }, []);
+  const stats = useMemo(() => {
+    const totalSteps = track.steps.length;
+    const completedSteps = progress.completedStepIds.length;
+    const percentComplete = totalSteps > 0 ? Math.round(completedSteps / totalSteps * 100) : 0;
+    const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) + (track.completionRewards?.xpBonus ?? 0);
+    return {
+      totalSteps,
+      completedSteps,
+      remainingSteps: totalSteps - completedSteps,
+      percentComplete,
+      totalXp,
+      isComplete: completedSteps === totalSteps
+    };
+  }, [track, progress.completedStepIds]);
+  return {
+    progress,
+    stats,
+    completeStep,
+    resetProgress,
+    incrementStreak
+  };
+}
+export {
+  useLearningProgress,
+  example_default as example,
+  XpBar,
+  ViewTabs,
+  StreakCounter,
+  BadgeDisplay
+};

package/dist/node/components/BadgeDisplay.js

@@ -0,0 +1,54 @@
+// src/components/BadgeDisplay.tsx
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var BADGE_ICONS = {
+  studio_first_30m: "\uD83C\uDFAF",
+  platform_tour: "\uD83D\uDDFA️",
+  crm_first_win: "\uD83C\uDFC6",
+  drill_master: "\uD83E\uDDE0",
+  coach_listener: "\uD83D\uDC42",
+  quest_complete: "⭐",
+  streak_7: "\uD83D\uDD25",
+  streak_30: "\uD83D\uDC8E",
+  default: "\uD83C\uDFC5"
+};
+var sizeStyles = {
+  sm: "h-6 w-6 text-sm",
+  md: "h-8 w-8 text-base",
+  lg: "h-10 w-10 text-lg"
+};
+function BadgeDisplay({
+  badges,
+  maxVisible = 5,
+  size = "md"
+}) {
+  const visibleBadges = badges.slice(0, maxVisible);
+  const hiddenCount = badges.length - maxVisible;
+  if (badges.length === 0) {
+    return /* @__PURE__ */ jsxDEV("div", {
+      className: "text-muted-foreground text-sm",
+      children: "No badges earned yet"
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "flex items-center gap-1",
+    children: [
+      visibleBadges.map((badge) => /* @__PURE__ */ jsxDEV("div", {
+        className: cn("flex items-center justify-center rounded-full bg-gradient-to-br from-amber-400/20 to-amber-600/20", sizeStyles[size]),
+        title: badge.replace(/_/g, " "),
+        children: BADGE_ICONS[badge] ?? BADGE_ICONS.default
+      }, badge, false, undefined, this)),
+      hiddenCount > 0 && /* @__PURE__ */ jsxDEV("div", {
+        className: cn("text-muted-foreground bg-muted flex items-center justify-center rounded-full", sizeStyles[size], "text-xs font-medium"),
+        children: [
+          "+",
+          hiddenCount
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  BadgeDisplay
+};

package/dist/node/components/StreakCounter.js

@@ -0,0 +1,50 @@
+// src/components/StreakCounter.tsx
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var sizeStyles = {
+  sm: {
+    container: "gap-1 px-2 py-1",
+    icon: "text-base",
+    text: "text-xs"
+  },
+  md: {
+    container: "gap-1.5 px-3 py-1.5",
+    icon: "text-lg",
+    text: "text-sm"
+  },
+  lg: {
+    container: "gap-2 px-4 py-2",
+    icon: "text-xl",
+    text: "text-base"
+  }
+};
+function StreakCounter({
+  days,
+  isActive = true,
+  size = "md"
+}) {
+  const styles = sizeStyles[size];
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: cn("inline-flex items-center rounded-full font-semibold", styles.container, isActive ? "bg-orange-500/10 text-orange-500" : "bg-muted text-muted-foreground"),
+    children: [
+      /* @__PURE__ */ jsxDEV("span", {
+        className: styles.icon,
+        role: "img",
+        "aria-label": "streak",
+        children: "\uD83D\uDD25"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("span", {
+        className: styles.text,
+        children: [
+          days,
+          " ",
+          days === 1 ? "day" : "days"
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  StreakCounter
+};

package/dist/node/components/ViewTabs.js

@@ -0,0 +1,46 @@
+// src/components/ViewTabs.tsx
+import { Button } from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var VIEW_LABELS = {
+  overview: { label: "Overview", icon: "\uD83D\uDCCA" },
+  steps: { label: "Steps", icon: "\uD83D\uDCDD" },
+  progress: { label: "Progress", icon: "\uD83D\uDCC8" },
+  timeline: { label: "Timeline", icon: "\uD83D\uDCC5" }
+};
+var DEFAULT_VIEWS = [
+  "overview",
+  "steps",
+  "progress",
+  "timeline"
+];
+function ViewTabs({
+  currentView,
+  onViewChange,
+  availableViews = DEFAULT_VIEWS
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "flex flex-wrap gap-2",
+    children: availableViews.map((view) => {
+      const { label, icon } = VIEW_LABELS[view];
+      const isActive = currentView === view;
+      return /* @__PURE__ */ jsxDEV(Button, {
+        variant: isActive ? "default" : "outline",
+        size: "sm",
+        onClick: () => onViewChange(view),
+        className: "gap-1.5",
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            children: icon
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            children: label
+          }, undefined, false, undefined, this)
+        ]
+      }, view, true, undefined, this);
+    })
+  }, undefined, false, undefined, this);
+}
+export {
+  ViewTabs
+};

package/dist/node/components/XpBar.js

@@ -0,0 +1,62 @@
+// src/components/XpBar.tsx
+import { Progress } from "@contractspec/lib.ui-kit-web/ui/progress";
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var sizeStyles = {
+  sm: "h-2",
+  md: "h-3",
+  lg: "h-4"
+};
+var labelSizeStyles = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+function XpBar({
+  current,
+  max,
+  level,
+  showLabel = true,
+  size = "md"
+}) {
+  const percentage = max > 0 ? Math.min(current / max * 100, 100) : 0;
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "w-full space-y-1",
+    children: [
+      showLabel && /* @__PURE__ */ jsxDEV("div", {
+        className: cn("flex items-center justify-between", labelSizeStyles[size]),
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            className: "text-muted-foreground font-medium",
+            children: [
+              level !== undefined && /* @__PURE__ */ jsxDEV("span", {
+                className: "text-primary mr-1",
+                children: [
+                  "Lvl ",
+                  level
+                ]
+              }, undefined, true, undefined, this),
+              "XP"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            className: "font-semibold",
+            children: [
+              current.toLocaleString(),
+              " / ",
+              max.toLocaleString()
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(Progress, {
+        value: percentage,
+        className: cn("bg-muted", sizeStyles[size])
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  XpBar
+};