@contractspec/example.learning-journey-ui-shared 1.57.0 β 1.58.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +52 -53
- package/.turbo/turbo-prebuild.log +1 -0
- package/CHANGELOG.md +15 -0
- package/dist/browser/components/BadgeDisplay.js +54 -0
- package/dist/browser/components/StreakCounter.js +50 -0
- package/dist/browser/components/ViewTabs.js +46 -0
- package/dist/browser/components/XpBar.js +62 -0
- package/dist/browser/components/index.js +209 -0
- package/dist/browser/docs/index.js +21 -0
- package/dist/browser/docs/learning-journey-ui-shared.docblock.js +21 -0
- package/dist/browser/example.js +32 -0
- package/dist/browser/hooks/index.js +71 -0
- package/dist/browser/hooks/useLearningProgress.js +71 -0
- package/dist/browser/index.js +330 -0
- package/dist/browser/types.js +0 -0
- package/dist/components/BadgeDisplay.d.ts +2 -11
- package/dist/components/BadgeDisplay.d.ts.map +1 -1
- package/dist/components/BadgeDisplay.js +51 -41
- package/dist/components/StreakCounter.d.ts +2 -11
- package/dist/components/StreakCounter.d.ts.map +1 -1
- package/dist/components/StreakCounter.js +48 -43
- package/dist/components/ViewTabs.d.ts +2 -11
- package/dist/components/ViewTabs.d.ts.map +1 -1
- package/dist/components/ViewTabs.js +43 -45
- package/dist/components/XpBar.d.ts +2 -13
- package/dist/components/XpBar.d.ts.map +1 -1
- package/dist/components/XpBar.js +58 -42
- package/dist/components/index.d.ts +5 -5
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/index.js +209 -5
- package/dist/docs/index.d.ts +2 -1
- package/dist/docs/index.d.ts.map +1 -0
- package/dist/docs/index.js +22 -1
- package/dist/docs/learning-journey-ui-shared.docblock.d.ts +2 -1
- package/dist/docs/learning-journey-ui-shared.docblock.d.ts.map +1 -0
- package/dist/docs/learning-journey-ui-shared.docblock.js +20 -18
- package/dist/example.d.ts +2 -6
- package/dist/example.d.ts.map +1 -1
- package/dist/example.js +31 -39
- package/dist/hooks/index.d.ts +2 -2
- package/dist/hooks/index.d.ts.map +1 -0
- package/dist/hooks/index.js +72 -3
- package/dist/hooks/useLearningProgress.d.ts +15 -19
- package/dist/hooks/useLearningProgress.d.ts.map +1 -1
- package/dist/hooks/useLearningProgress.js +68 -70
- package/dist/index.d.ts +6 -9
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +331 -11
- package/dist/node/components/BadgeDisplay.js +54 -0
- package/dist/node/components/StreakCounter.js +50 -0
- package/dist/node/components/ViewTabs.js +46 -0
- package/dist/node/components/XpBar.js +62 -0
- package/dist/node/components/index.js +209 -0
- package/dist/node/docs/index.js +21 -0
- package/dist/node/docs/learning-journey-ui-shared.docblock.js +21 -0
- package/dist/node/example.js +32 -0
- package/dist/node/hooks/index.js +71 -0
- package/dist/node/hooks/useLearningProgress.js +71 -0
- package/dist/node/index.js +330 -0
- package/dist/node/types.js +0 -0
- package/dist/types.d.ts +38 -42
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js +1 -0
- package/package.json +135 -34
- package/tsdown.config.js +1 -2
- package/.turbo/turbo-build$colon$bundle.log +0 -53
- package/dist/components/BadgeDisplay.js.map +0 -1
- package/dist/components/StreakCounter.js.map +0 -1
- package/dist/components/ViewTabs.js.map +0 -1
- package/dist/components/XpBar.js.map +0 -1
- package/dist/docs/learning-journey-ui-shared.docblock.js.map +0 -1
- package/dist/example.js.map +0 -1
- package/dist/hooks/useLearningProgress.js.map +0 -1
- package/tsconfig.tsbuildinfo +0 -1
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
// src/hooks/useLearningProgress.ts
|
|
2
|
+
import { useState, useCallback, useMemo } from "react";
|
|
3
|
+
"use client";
|
|
4
|
+
function createDefaultProgress(trackId) {
|
|
5
|
+
return {
|
|
6
|
+
trackId,
|
|
7
|
+
completedStepIds: [],
|
|
8
|
+
currentStepId: null,
|
|
9
|
+
xpEarned: 0,
|
|
10
|
+
streakDays: 0,
|
|
11
|
+
lastActivityDate: null,
|
|
12
|
+
badges: []
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
function useLearningProgress(track) {
|
|
16
|
+
const [progress, setProgress] = useState(() => createDefaultProgress(track.id));
|
|
17
|
+
const completeStep = useCallback((stepId) => {
|
|
18
|
+
const step = track.steps.find((s) => s.id === stepId);
|
|
19
|
+
if (!step || progress.completedStepIds.includes(stepId))
|
|
20
|
+
return;
|
|
21
|
+
setProgress((prev) => {
|
|
22
|
+
const newCompletedIds = [...prev.completedStepIds, stepId];
|
|
23
|
+
const xpReward = step.xpReward ?? 0;
|
|
24
|
+
const nextStep = track.steps.find((s) => !newCompletedIds.includes(s.id));
|
|
25
|
+
const isTrackComplete = newCompletedIds.length === track.steps.length;
|
|
26
|
+
const completionBonus = isTrackComplete ? track.completionRewards?.xpBonus ?? 0 : 0;
|
|
27
|
+
return {
|
|
28
|
+
...prev,
|
|
29
|
+
completedStepIds: newCompletedIds,
|
|
30
|
+
currentStepId: nextStep?.id ?? null,
|
|
31
|
+
xpEarned: prev.xpEarned + xpReward + completionBonus,
|
|
32
|
+
lastActivityDate: new Date().toISOString(),
|
|
33
|
+
badges: isTrackComplete && track.completionRewards?.badgeKey ? [...prev.badges, track.completionRewards.badgeKey] : prev.badges
|
|
34
|
+
};
|
|
35
|
+
});
|
|
36
|
+
}, [track, progress.completedStepIds]);
|
|
37
|
+
const resetProgress = useCallback(() => {
|
|
38
|
+
setProgress(createDefaultProgress(track.id));
|
|
39
|
+
}, [track.id]);
|
|
40
|
+
const incrementStreak = useCallback(() => {
|
|
41
|
+
setProgress((prev) => ({
|
|
42
|
+
...prev,
|
|
43
|
+
streakDays: prev.streakDays + 1,
|
|
44
|
+
lastActivityDate: new Date().toISOString()
|
|
45
|
+
}));
|
|
46
|
+
}, []);
|
|
47
|
+
const stats = useMemo(() => {
|
|
48
|
+
const totalSteps = track.steps.length;
|
|
49
|
+
const completedSteps = progress.completedStepIds.length;
|
|
50
|
+
const percentComplete = totalSteps > 0 ? Math.round(completedSteps / totalSteps * 100) : 0;
|
|
51
|
+
const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) + (track.completionRewards?.xpBonus ?? 0);
|
|
52
|
+
return {
|
|
53
|
+
totalSteps,
|
|
54
|
+
completedSteps,
|
|
55
|
+
remainingSteps: totalSteps - completedSteps,
|
|
56
|
+
percentComplete,
|
|
57
|
+
totalXp,
|
|
58
|
+
isComplete: completedSteps === totalSteps
|
|
59
|
+
};
|
|
60
|
+
}, [track, progress.completedStepIds]);
|
|
61
|
+
return {
|
|
62
|
+
progress,
|
|
63
|
+
stats,
|
|
64
|
+
completeStep,
|
|
65
|
+
resetProgress,
|
|
66
|
+
incrementStreak
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
export {
|
|
70
|
+
useLearningProgress
|
|
71
|
+
};
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
// src/hooks/useLearningProgress.ts
|
|
2
|
+
import { useState, useCallback, useMemo } from "react";
|
|
3
|
+
"use client";
|
|
4
|
+
function createDefaultProgress(trackId) {
|
|
5
|
+
return {
|
|
6
|
+
trackId,
|
|
7
|
+
completedStepIds: [],
|
|
8
|
+
currentStepId: null,
|
|
9
|
+
xpEarned: 0,
|
|
10
|
+
streakDays: 0,
|
|
11
|
+
lastActivityDate: null,
|
|
12
|
+
badges: []
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
function useLearningProgress(track) {
|
|
16
|
+
const [progress, setProgress] = useState(() => createDefaultProgress(track.id));
|
|
17
|
+
const completeStep = useCallback((stepId) => {
|
|
18
|
+
const step = track.steps.find((s) => s.id === stepId);
|
|
19
|
+
if (!step || progress.completedStepIds.includes(stepId))
|
|
20
|
+
return;
|
|
21
|
+
setProgress((prev) => {
|
|
22
|
+
const newCompletedIds = [...prev.completedStepIds, stepId];
|
|
23
|
+
const xpReward = step.xpReward ?? 0;
|
|
24
|
+
const nextStep = track.steps.find((s) => !newCompletedIds.includes(s.id));
|
|
25
|
+
const isTrackComplete = newCompletedIds.length === track.steps.length;
|
|
26
|
+
const completionBonus = isTrackComplete ? track.completionRewards?.xpBonus ?? 0 : 0;
|
|
27
|
+
return {
|
|
28
|
+
...prev,
|
|
29
|
+
completedStepIds: newCompletedIds,
|
|
30
|
+
currentStepId: nextStep?.id ?? null,
|
|
31
|
+
xpEarned: prev.xpEarned + xpReward + completionBonus,
|
|
32
|
+
lastActivityDate: new Date().toISOString(),
|
|
33
|
+
badges: isTrackComplete && track.completionRewards?.badgeKey ? [...prev.badges, track.completionRewards.badgeKey] : prev.badges
|
|
34
|
+
};
|
|
35
|
+
});
|
|
36
|
+
}, [track, progress.completedStepIds]);
|
|
37
|
+
const resetProgress = useCallback(() => {
|
|
38
|
+
setProgress(createDefaultProgress(track.id));
|
|
39
|
+
}, [track.id]);
|
|
40
|
+
const incrementStreak = useCallback(() => {
|
|
41
|
+
setProgress((prev) => ({
|
|
42
|
+
...prev,
|
|
43
|
+
streakDays: prev.streakDays + 1,
|
|
44
|
+
lastActivityDate: new Date().toISOString()
|
|
45
|
+
}));
|
|
46
|
+
}, []);
|
|
47
|
+
const stats = useMemo(() => {
|
|
48
|
+
const totalSteps = track.steps.length;
|
|
49
|
+
const completedSteps = progress.completedStepIds.length;
|
|
50
|
+
const percentComplete = totalSteps > 0 ? Math.round(completedSteps / totalSteps * 100) : 0;
|
|
51
|
+
const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) + (track.completionRewards?.xpBonus ?? 0);
|
|
52
|
+
return {
|
|
53
|
+
totalSteps,
|
|
54
|
+
completedSteps,
|
|
55
|
+
remainingSteps: totalSteps - completedSteps,
|
|
56
|
+
percentComplete,
|
|
57
|
+
totalXp,
|
|
58
|
+
isComplete: completedSteps === totalSteps
|
|
59
|
+
};
|
|
60
|
+
}, [track, progress.completedStepIds]);
|
|
61
|
+
return {
|
|
62
|
+
progress,
|
|
63
|
+
stats,
|
|
64
|
+
completeStep,
|
|
65
|
+
resetProgress,
|
|
66
|
+
incrementStreak
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
export {
|
|
70
|
+
useLearningProgress
|
|
71
|
+
};
|
|
@@ -0,0 +1,330 @@
|
|
|
1
|
+
// src/components/BadgeDisplay.tsx
|
|
2
|
+
import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
|
|
3
|
+
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
4
|
+
"use client";
|
|
5
|
+
var BADGE_ICONS = {
|
|
6
|
+
studio_first_30m: "\uD83C\uDFAF",
|
|
7
|
+
platform_tour: "\uD83D\uDDFAοΈ",
|
|
8
|
+
crm_first_win: "\uD83C\uDFC6",
|
|
9
|
+
drill_master: "\uD83E\uDDE0",
|
|
10
|
+
coach_listener: "\uD83D\uDC42",
|
|
11
|
+
quest_complete: "β",
|
|
12
|
+
streak_7: "\uD83D\uDD25",
|
|
13
|
+
streak_30: "\uD83D\uDC8E",
|
|
14
|
+
default: "\uD83C\uDFC5"
|
|
15
|
+
};
|
|
16
|
+
var sizeStyles = {
|
|
17
|
+
sm: "h-6 w-6 text-sm",
|
|
18
|
+
md: "h-8 w-8 text-base",
|
|
19
|
+
lg: "h-10 w-10 text-lg"
|
|
20
|
+
};
|
|
21
|
+
function BadgeDisplay({
|
|
22
|
+
badges,
|
|
23
|
+
maxVisible = 5,
|
|
24
|
+
size = "md"
|
|
25
|
+
}) {
|
|
26
|
+
const visibleBadges = badges.slice(0, maxVisible);
|
|
27
|
+
const hiddenCount = badges.length - maxVisible;
|
|
28
|
+
if (badges.length === 0) {
|
|
29
|
+
return /* @__PURE__ */ jsxDEV("div", {
|
|
30
|
+
className: "text-muted-foreground text-sm",
|
|
31
|
+
children: "No badges earned yet"
|
|
32
|
+
}, undefined, false, undefined, this);
|
|
33
|
+
}
|
|
34
|
+
return /* @__PURE__ */ jsxDEV("div", {
|
|
35
|
+
className: "flex items-center gap-1",
|
|
36
|
+
children: [
|
|
37
|
+
visibleBadges.map((badge) => /* @__PURE__ */ jsxDEV("div", {
|
|
38
|
+
className: cn("flex items-center justify-center rounded-full bg-gradient-to-br from-amber-400/20 to-amber-600/20", sizeStyles[size]),
|
|
39
|
+
title: badge.replace(/_/g, " "),
|
|
40
|
+
children: BADGE_ICONS[badge] ?? BADGE_ICONS.default
|
|
41
|
+
}, badge, false, undefined, this)),
|
|
42
|
+
hiddenCount > 0 && /* @__PURE__ */ jsxDEV("div", {
|
|
43
|
+
className: cn("text-muted-foreground bg-muted flex items-center justify-center rounded-full", sizeStyles[size], "text-xs font-medium"),
|
|
44
|
+
children: [
|
|
45
|
+
"+",
|
|
46
|
+
hiddenCount
|
|
47
|
+
]
|
|
48
|
+
}, undefined, true, undefined, this)
|
|
49
|
+
]
|
|
50
|
+
}, undefined, true, undefined, this);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// src/components/StreakCounter.tsx
|
|
54
|
+
import { cn as cn2 } from "@contractspec/lib.ui-kit-web/ui/utils";
|
|
55
|
+
import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
|
|
56
|
+
"use client";
|
|
57
|
+
var sizeStyles2 = {
|
|
58
|
+
sm: {
|
|
59
|
+
container: "gap-1 px-2 py-1",
|
|
60
|
+
icon: "text-base",
|
|
61
|
+
text: "text-xs"
|
|
62
|
+
},
|
|
63
|
+
md: {
|
|
64
|
+
container: "gap-1.5 px-3 py-1.5",
|
|
65
|
+
icon: "text-lg",
|
|
66
|
+
text: "text-sm"
|
|
67
|
+
},
|
|
68
|
+
lg: {
|
|
69
|
+
container: "gap-2 px-4 py-2",
|
|
70
|
+
icon: "text-xl",
|
|
71
|
+
text: "text-base"
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
function StreakCounter({
|
|
75
|
+
days,
|
|
76
|
+
isActive = true,
|
|
77
|
+
size = "md"
|
|
78
|
+
}) {
|
|
79
|
+
const styles = sizeStyles2[size];
|
|
80
|
+
return /* @__PURE__ */ jsxDEV2("div", {
|
|
81
|
+
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"),
|
|
82
|
+
children: [
|
|
83
|
+
/* @__PURE__ */ jsxDEV2("span", {
|
|
84
|
+
className: styles.icon,
|
|
85
|
+
role: "img",
|
|
86
|
+
"aria-label": "streak",
|
|
87
|
+
children: "\uD83D\uDD25"
|
|
88
|
+
}, undefined, false, undefined, this),
|
|
89
|
+
/* @__PURE__ */ jsxDEV2("span", {
|
|
90
|
+
className: styles.text,
|
|
91
|
+
children: [
|
|
92
|
+
days,
|
|
93
|
+
" ",
|
|
94
|
+
days === 1 ? "day" : "days"
|
|
95
|
+
]
|
|
96
|
+
}, undefined, true, undefined, this)
|
|
97
|
+
]
|
|
98
|
+
}, undefined, true, undefined, this);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// src/components/ViewTabs.tsx
|
|
102
|
+
import { Button } from "@contractspec/lib.design-system";
|
|
103
|
+
import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
|
|
104
|
+
"use client";
|
|
105
|
+
var VIEW_LABELS = {
|
|
106
|
+
overview: { label: "Overview", icon: "\uD83D\uDCCA" },
|
|
107
|
+
steps: { label: "Steps", icon: "\uD83D\uDCDD" },
|
|
108
|
+
progress: { label: "Progress", icon: "\uD83D\uDCC8" },
|
|
109
|
+
timeline: { label: "Timeline", icon: "\uD83D\uDCC5" }
|
|
110
|
+
};
|
|
111
|
+
var DEFAULT_VIEWS = [
|
|
112
|
+
"overview",
|
|
113
|
+
"steps",
|
|
114
|
+
"progress",
|
|
115
|
+
"timeline"
|
|
116
|
+
];
|
|
117
|
+
function ViewTabs({
|
|
118
|
+
currentView,
|
|
119
|
+
onViewChange,
|
|
120
|
+
availableViews = DEFAULT_VIEWS
|
|
121
|
+
}) {
|
|
122
|
+
return /* @__PURE__ */ jsxDEV3("div", {
|
|
123
|
+
className: "flex flex-wrap gap-2",
|
|
124
|
+
children: availableViews.map((view) => {
|
|
125
|
+
const { label, icon } = VIEW_LABELS[view];
|
|
126
|
+
const isActive = currentView === view;
|
|
127
|
+
return /* @__PURE__ */ jsxDEV3(Button, {
|
|
128
|
+
variant: isActive ? "default" : "outline",
|
|
129
|
+
size: "sm",
|
|
130
|
+
onClick: () => onViewChange(view),
|
|
131
|
+
className: "gap-1.5",
|
|
132
|
+
children: [
|
|
133
|
+
/* @__PURE__ */ jsxDEV3("span", {
|
|
134
|
+
children: icon
|
|
135
|
+
}, undefined, false, undefined, this),
|
|
136
|
+
/* @__PURE__ */ jsxDEV3("span", {
|
|
137
|
+
children: label
|
|
138
|
+
}, undefined, false, undefined, this)
|
|
139
|
+
]
|
|
140
|
+
}, view, true, undefined, this);
|
|
141
|
+
})
|
|
142
|
+
}, undefined, false, undefined, this);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// src/components/XpBar.tsx
|
|
146
|
+
import { Progress } from "@contractspec/lib.ui-kit-web/ui/progress";
|
|
147
|
+
import { cn as cn3 } from "@contractspec/lib.ui-kit-web/ui/utils";
|
|
148
|
+
import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
|
|
149
|
+
"use client";
|
|
150
|
+
var sizeStyles3 = {
|
|
151
|
+
sm: "h-2",
|
|
152
|
+
md: "h-3",
|
|
153
|
+
lg: "h-4"
|
|
154
|
+
};
|
|
155
|
+
var labelSizeStyles = {
|
|
156
|
+
sm: "text-xs",
|
|
157
|
+
md: "text-sm",
|
|
158
|
+
lg: "text-base"
|
|
159
|
+
};
|
|
160
|
+
function XpBar({
|
|
161
|
+
current,
|
|
162
|
+
max,
|
|
163
|
+
level,
|
|
164
|
+
showLabel = true,
|
|
165
|
+
size = "md"
|
|
166
|
+
}) {
|
|
167
|
+
const percentage = max > 0 ? Math.min(current / max * 100, 100) : 0;
|
|
168
|
+
return /* @__PURE__ */ jsxDEV4("div", {
|
|
169
|
+
className: "w-full space-y-1",
|
|
170
|
+
children: [
|
|
171
|
+
showLabel && /* @__PURE__ */ jsxDEV4("div", {
|
|
172
|
+
className: cn3("flex items-center justify-between", labelSizeStyles[size]),
|
|
173
|
+
children: [
|
|
174
|
+
/* @__PURE__ */ jsxDEV4("span", {
|
|
175
|
+
className: "text-muted-foreground font-medium",
|
|
176
|
+
children: [
|
|
177
|
+
level !== undefined && /* @__PURE__ */ jsxDEV4("span", {
|
|
178
|
+
className: "text-primary mr-1",
|
|
179
|
+
children: [
|
|
180
|
+
"Lvl ",
|
|
181
|
+
level
|
|
182
|
+
]
|
|
183
|
+
}, undefined, true, undefined, this),
|
|
184
|
+
"XP"
|
|
185
|
+
]
|
|
186
|
+
}, undefined, true, undefined, this),
|
|
187
|
+
/* @__PURE__ */ jsxDEV4("span", {
|
|
188
|
+
className: "font-semibold",
|
|
189
|
+
children: [
|
|
190
|
+
current.toLocaleString(),
|
|
191
|
+
" / ",
|
|
192
|
+
max.toLocaleString()
|
|
193
|
+
]
|
|
194
|
+
}, undefined, true, undefined, this)
|
|
195
|
+
]
|
|
196
|
+
}, undefined, true, undefined, this),
|
|
197
|
+
/* @__PURE__ */ jsxDEV4(Progress, {
|
|
198
|
+
value: percentage,
|
|
199
|
+
className: cn3("bg-muted", sizeStyles3[size])
|
|
200
|
+
}, undefined, false, undefined, this)
|
|
201
|
+
]
|
|
202
|
+
}, undefined, true, undefined, this);
|
|
203
|
+
}
|
|
204
|
+
// src/docs/learning-journey-ui-shared.docblock.ts
|
|
205
|
+
import { registerDocBlocks } from "@contractspec/lib.contracts/docs";
|
|
206
|
+
var blocks = [
|
|
207
|
+
{
|
|
208
|
+
id: "docs.examples.learning-journey-ui-shared",
|
|
209
|
+
title: "Learning Journey UI β Shared",
|
|
210
|
+
summary: "Shared UI components and hooks for learning journey mini-apps.",
|
|
211
|
+
kind: "reference",
|
|
212
|
+
visibility: "public",
|
|
213
|
+
route: "/docs/examples/learning-journey-ui-shared",
|
|
214
|
+
tags: ["learning", "ui", "shared"],
|
|
215
|
+
body: `## Includes
|
|
216
|
+
- Hooks: useLearningProgress
|
|
217
|
+
- Components: XpBar, StreakCounter, BadgeDisplay, ViewTabs
|
|
218
|
+
|
|
219
|
+
## Notes
|
|
220
|
+
- Keep components accessible (labels, focus, contrast).
|
|
221
|
+
- Prefer design-system tokens and components.`
|
|
222
|
+
}
|
|
223
|
+
];
|
|
224
|
+
registerDocBlocks(blocks);
|
|
225
|
+
// src/example.ts
|
|
226
|
+
import { defineExample } from "@contractspec/lib.contracts";
|
|
227
|
+
var example = defineExample({
|
|
228
|
+
meta: {
|
|
229
|
+
key: "learning-journey-ui-shared",
|
|
230
|
+
version: "1.0.0",
|
|
231
|
+
title: "Learning Journey UI β Shared",
|
|
232
|
+
description: "Shared UI components and hooks for learning journey mini-apps.",
|
|
233
|
+
kind: "ui",
|
|
234
|
+
visibility: "public",
|
|
235
|
+
stability: "experimental",
|
|
236
|
+
owners: ["@platform.core"],
|
|
237
|
+
tags: ["learning", "ui", "shared"]
|
|
238
|
+
},
|
|
239
|
+
docs: {
|
|
240
|
+
rootDocId: "docs.examples.learning-journey-ui-shared"
|
|
241
|
+
},
|
|
242
|
+
entrypoints: {
|
|
243
|
+
packageName: "@contractspec/example.learning-journey-ui-shared",
|
|
244
|
+
docs: "./docs"
|
|
245
|
+
},
|
|
246
|
+
surfaces: {
|
|
247
|
+
templates: true,
|
|
248
|
+
sandbox: { enabled: true, modes: ["playground", "markdown"] },
|
|
249
|
+
studio: { enabled: true, installable: true },
|
|
250
|
+
mcp: { enabled: true }
|
|
251
|
+
}
|
|
252
|
+
});
|
|
253
|
+
var example_default = example;
|
|
254
|
+
|
|
255
|
+
// src/hooks/useLearningProgress.ts
|
|
256
|
+
import { useState, useCallback, useMemo } from "react";
|
|
257
|
+
"use client";
|
|
258
|
+
function createDefaultProgress(trackId) {
|
|
259
|
+
return {
|
|
260
|
+
trackId,
|
|
261
|
+
completedStepIds: [],
|
|
262
|
+
currentStepId: null,
|
|
263
|
+
xpEarned: 0,
|
|
264
|
+
streakDays: 0,
|
|
265
|
+
lastActivityDate: null,
|
|
266
|
+
badges: []
|
|
267
|
+
};
|
|
268
|
+
}
|
|
269
|
+
function useLearningProgress(track) {
|
|
270
|
+
const [progress, setProgress] = useState(() => createDefaultProgress(track.id));
|
|
271
|
+
const completeStep = useCallback((stepId) => {
|
|
272
|
+
const step = track.steps.find((s) => s.id === stepId);
|
|
273
|
+
if (!step || progress.completedStepIds.includes(stepId))
|
|
274
|
+
return;
|
|
275
|
+
setProgress((prev) => {
|
|
276
|
+
const newCompletedIds = [...prev.completedStepIds, stepId];
|
|
277
|
+
const xpReward = step.xpReward ?? 0;
|
|
278
|
+
const nextStep = track.steps.find((s) => !newCompletedIds.includes(s.id));
|
|
279
|
+
const isTrackComplete = newCompletedIds.length === track.steps.length;
|
|
280
|
+
const completionBonus = isTrackComplete ? track.completionRewards?.xpBonus ?? 0 : 0;
|
|
281
|
+
return {
|
|
282
|
+
...prev,
|
|
283
|
+
completedStepIds: newCompletedIds,
|
|
284
|
+
currentStepId: nextStep?.id ?? null,
|
|
285
|
+
xpEarned: prev.xpEarned + xpReward + completionBonus,
|
|
286
|
+
lastActivityDate: new Date().toISOString(),
|
|
287
|
+
badges: isTrackComplete && track.completionRewards?.badgeKey ? [...prev.badges, track.completionRewards.badgeKey] : prev.badges
|
|
288
|
+
};
|
|
289
|
+
});
|
|
290
|
+
}, [track, progress.completedStepIds]);
|
|
291
|
+
const resetProgress = useCallback(() => {
|
|
292
|
+
setProgress(createDefaultProgress(track.id));
|
|
293
|
+
}, [track.id]);
|
|
294
|
+
const incrementStreak = useCallback(() => {
|
|
295
|
+
setProgress((prev) => ({
|
|
296
|
+
...prev,
|
|
297
|
+
streakDays: prev.streakDays + 1,
|
|
298
|
+
lastActivityDate: new Date().toISOString()
|
|
299
|
+
}));
|
|
300
|
+
}, []);
|
|
301
|
+
const stats = useMemo(() => {
|
|
302
|
+
const totalSteps = track.steps.length;
|
|
303
|
+
const completedSteps = progress.completedStepIds.length;
|
|
304
|
+
const percentComplete = totalSteps > 0 ? Math.round(completedSteps / totalSteps * 100) : 0;
|
|
305
|
+
const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) + (track.completionRewards?.xpBonus ?? 0);
|
|
306
|
+
return {
|
|
307
|
+
totalSteps,
|
|
308
|
+
completedSteps,
|
|
309
|
+
remainingSteps: totalSteps - completedSteps,
|
|
310
|
+
percentComplete,
|
|
311
|
+
totalXp,
|
|
312
|
+
isComplete: completedSteps === totalSteps
|
|
313
|
+
};
|
|
314
|
+
}, [track, progress.completedStepIds]);
|
|
315
|
+
return {
|
|
316
|
+
progress,
|
|
317
|
+
stats,
|
|
318
|
+
completeStep,
|
|
319
|
+
resetProgress,
|
|
320
|
+
incrementStreak
|
|
321
|
+
};
|
|
322
|
+
}
|
|
323
|
+
export {
|
|
324
|
+
useLearningProgress,
|
|
325
|
+
example_default as example,
|
|
326
|
+
XpBar,
|
|
327
|
+
ViewTabs,
|
|
328
|
+
StreakCounter,
|
|
329
|
+
BadgeDisplay
|
|
330
|
+
};
|
|
File without changes
|
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
import { BadgeDisplayProps } from
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
//#region src/components/BadgeDisplay.d.ts
|
|
5
|
-
declare function BadgeDisplay({
|
|
6
|
-
badges,
|
|
7
|
-
maxVisible,
|
|
8
|
-
size
|
|
9
|
-
}: BadgeDisplayProps): react_jsx_runtime0.JSX.Element;
|
|
10
|
-
//#endregion
|
|
11
|
-
export { BadgeDisplay };
|
|
1
|
+
import type { BadgeDisplayProps } from '../types';
|
|
2
|
+
export declare function BadgeDisplay({ badges, maxVisible, size, }: BadgeDisplayProps): import("react/jsx-runtime").JSX.Element;
|
|
12
3
|
//# sourceMappingURL=BadgeDisplay.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeDisplay.d.ts","
|
|
1
|
+
{"version":3,"file":"BadgeDisplay.d.ts","sourceRoot":"","sources":["../../src/components/BadgeDisplay.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAoBlD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,UAAc,EACd,IAAW,GACZ,EAAE,iBAAiB,2CAqCnB"}
|
|
@@ -1,45 +1,55 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
// @bun
|
|
2
|
+
// src/components/BadgeDisplay.tsx
|
|
3
3
|
import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
default: "π
"
|
|
4
|
+
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
5
|
+
"use client";
|
|
6
|
+
var BADGE_ICONS = {
|
|
7
|
+
studio_first_30m: "\uD83C\uDFAF",
|
|
8
|
+
platform_tour: "\uD83D\uDDFA\uFE0F",
|
|
9
|
+
crm_first_win: "\uD83C\uDFC6",
|
|
10
|
+
drill_master: "\uD83E\uDDE0",
|
|
11
|
+
coach_listener: "\uD83D\uDC42",
|
|
12
|
+
quest_complete: "\u2B50",
|
|
13
|
+
streak_7: "\uD83D\uDD25",
|
|
14
|
+
streak_30: "\uD83D\uDC8E",
|
|
15
|
+
default: "\uD83C\uDFC5"
|
|
17
16
|
};
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
var sizeStyles = {
|
|
18
|
+
sm: "h-6 w-6 text-sm",
|
|
19
|
+
md: "h-8 w-8 text-base",
|
|
20
|
+
lg: "h-10 w-10 text-lg"
|
|
22
21
|
};
|
|
23
|
-
function BadgeDisplay({
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
22
|
+
function BadgeDisplay({
|
|
23
|
+
badges,
|
|
24
|
+
maxVisible = 5,
|
|
25
|
+
size = "md"
|
|
26
|
+
}) {
|
|
27
|
+
const visibleBadges = badges.slice(0, maxVisible);
|
|
28
|
+
const hiddenCount = badges.length - maxVisible;
|
|
29
|
+
if (badges.length === 0) {
|
|
30
|
+
return /* @__PURE__ */ jsxDEV("div", {
|
|
31
|
+
className: "text-muted-foreground text-sm",
|
|
32
|
+
children: "No badges earned yet"
|
|
33
|
+
}, undefined, false, undefined, this);
|
|
34
|
+
}
|
|
35
|
+
return /* @__PURE__ */ jsxDEV("div", {
|
|
36
|
+
className: "flex items-center gap-1",
|
|
37
|
+
children: [
|
|
38
|
+
visibleBadges.map((badge) => /* @__PURE__ */ jsxDEV("div", {
|
|
39
|
+
className: cn("flex items-center justify-center rounded-full bg-gradient-to-br from-amber-400/20 to-amber-600/20", sizeStyles[size]),
|
|
40
|
+
title: badge.replace(/_/g, " "),
|
|
41
|
+
children: BADGE_ICONS[badge] ?? BADGE_ICONS.default
|
|
42
|
+
}, badge, false, undefined, this)),
|
|
43
|
+
hiddenCount > 0 && /* @__PURE__ */ jsxDEV("div", {
|
|
44
|
+
className: cn("text-muted-foreground bg-muted flex items-center justify-center rounded-full", sizeStyles[size], "text-xs font-medium"),
|
|
45
|
+
children: [
|
|
46
|
+
"+",
|
|
47
|
+
hiddenCount
|
|
48
|
+
]
|
|
49
|
+
}, undefined, true, undefined, this)
|
|
50
|
+
]
|
|
51
|
+
}, undefined, true, undefined, this);
|
|
41
52
|
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
//# sourceMappingURL=BadgeDisplay.js.map
|
|
53
|
+
export {
|
|
54
|
+
BadgeDisplay
|
|
55
|
+
};
|
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
import { StreakCounterProps } from
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
//#region src/components/StreakCounter.d.ts
|
|
5
|
-
declare function StreakCounter({
|
|
6
|
-
days,
|
|
7
|
-
isActive,
|
|
8
|
-
size
|
|
9
|
-
}: StreakCounterProps): react_jsx_runtime0.JSX.Element;
|
|
10
|
-
//#endregion
|
|
11
|
-
export { StreakCounter };
|
|
1
|
+
import type { StreakCounterProps } from '../types';
|
|
2
|
+
export declare function StreakCounter({ days, isActive, size, }: StreakCounterProps): import("react/jsx-runtime").JSX.Element;
|
|
12
3
|
//# sourceMappingURL=StreakCounter.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StreakCounter.d.ts","
|
|
1
|
+
{"version":3,"file":"StreakCounter.d.ts","sourceRoot":"","sources":["../../src/components/StreakCounter.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAoBnD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,QAAe,EACf,IAAW,GACZ,EAAE,kBAAkB,2CAqBpB"}
|