@lssm/example.learning-journey-ui-gamified 0.0.0-canary-20251217083314 → 1.41.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 +22 -24
- package/dist/DayCalendar-Cha869Bi.mjs +178 -0
- package/dist/components/index.d.mts +2 -0
- package/dist/components/index.mjs +4 -0
- package/dist/components-kh0CpIG2.mjs +1 -0
- package/dist/index-BJlKzI7h.d.mts +44 -0
- package/dist/index-DiAD2ivN.d.mts +33 -0
- package/dist/{example.d.ts → index.d.mts} +18 -1
- package/dist/index.mjs +1698 -0
- package/dist/views/index.d.mts +2 -0
- package/dist/views/index.mjs +4 -0
- package/dist/views-B-DapxWu.mjs +467 -0
- package/package.json +14 -27
- package/tsconfig.tsbuildinfo +1 -1
- package/tsdown.config.js +10 -14
- package/.turbo/turbo-build$colon$bundle.log +0 -403
- package/CHANGELOG.md +0 -19
- package/dist/GamifiedMiniApp.d.ts +0 -16
- package/dist/GamifiedMiniApp.js +0 -64
- package/dist/components/DayCalendar.d.ts +0 -15
- package/dist/components/DayCalendar.js +0 -32
- package/dist/components/FlashCard.d.ts +0 -18
- package/dist/components/FlashCard.js +0 -79
- package/dist/components/MasteryRing.d.ts +0 -17
- package/dist/components/MasteryRing.js +0 -81
- package/dist/components/index.d.ts +0 -4
- package/dist/components/index.js +0 -5
- package/dist/docs/index.d.ts +0 -1
- package/dist/docs/index.js +0 -1
- package/dist/docs/learning-journey-ui-gamified.docblock.d.ts +0 -1
- package/dist/docs/learning-journey-ui-gamified.docblock.js +0 -20
- package/dist/example.js +0 -34
- package/dist/examples/learning-journey-ui-shared/dist/components/BadgeDisplay.js +0 -44
- package/dist/examples/learning-journey-ui-shared/dist/components/StreakCounter.js +0 -45
- package/dist/examples/learning-journey-ui-shared/dist/components/ViewTabs.js +0 -48
- package/dist/examples/learning-journey-ui-shared/dist/components/XpBar.js +0 -46
- package/dist/examples/learning-journey-ui-shared/dist/components/index.js +0 -4
- package/dist/examples/learning-journey-ui-shared/dist/docs/index.js +0 -1
- package/dist/examples/learning-journey-ui-shared/dist/docs/learning-journey-ui-shared.docblock.js +0 -20
- package/dist/examples/learning-journey-ui-shared/dist/hooks/index.js +0 -1
- package/dist/examples/learning-journey-ui-shared/dist/hooks/useLearningProgress.js +0 -73
- package/dist/examples/learning-journey-ui-shared/dist/index.js +0 -8
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/PUBLISHING.docblock.js +0 -15
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/accessibility_wcag_compliance_specs.docblock.js +0 -15
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/index.js +0 -28
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/presentations.js +0 -71
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/registry.js +0 -44
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/PHASE_1_QUICKSTART.docblock.js +0 -15
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/PHASE_2_AI_NATIVE_OPERATIONS.docblock.js +0 -15
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/PHASE_3_AUTO_EVOLUTION.docblock.js +0 -15
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/PHASE_4_PERSONALIZATION_ENGINE.docblock.js +0 -15
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/PHASE_5_ZERO_TOUCH_OPERATIONS.docblock.js +0 -15
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/auth/better-auth-nextjs.docblock.js +0 -79
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/contracts/openapi-export.docblock.js +0 -56
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/lifecycle-stage-system.docblock.js +0 -15
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/llm/llm-integration.docblock.js +0 -356
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/mcp-endpoints.docblock.js +0 -36
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/presentation-runtime.docblock.js +0 -15
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/schema/README.docblock.js +0 -19
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/learning-events.docblock.js +0 -47
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/learning-journeys.docblock.js +0 -78
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/platform-admin-panel.docblock.js +0 -83
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/project-access-teams.docblock.js +0 -44
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/project-routing.docblock.js +0 -66
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/sandbox-unlogged.docblock.js +0 -39
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/team-invitations.docblock.js +0 -68
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/workspace-ops.docblock.js +0 -46
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/workspaces.docblock.js +0 -61
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/telemetry-ingest.docblock.js +0 -154
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/templates/runtime.docblock.js +0 -19
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/vscode-extension.docblock.js +0 -100
- package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/workflows/overview.docblock.js +0 -19
- package/dist/examples/learning-journey-ui-shared/dist/libs/design-system/dist/_virtual/rolldown_runtime.js +0 -5
- package/dist/examples/learning-journey-ui-shared/dist/libs/design-system/dist/components/atoms/Button.js +0 -33
- package/dist/examples/learning-journey-ui-shared/dist/libs/design-system/dist/ui-kit-web/dist/ui/button.js +0 -55
- package/dist/examples/learning-journey-ui-shared/dist/libs/design-system/dist/ui-kit-web/dist/ui-kit-core/dist/utils.js +0 -13
- package/dist/examples/learning-journey-ui-shared/dist/libs/ui-kit-web/dist/ui/progress.js +0 -23
- package/dist/examples/learning-journey-ui-shared/dist/libs/ui-kit-web/dist/ui/utils.js +0 -10
- package/dist/examples/learning-journey-ui-shared/dist/libs/ui-kit-web/dist/ui-kit-core/dist/utils.js +0 -10
- package/dist/index.d.ts +0 -12
- package/dist/index.js +0 -14
- package/dist/libs/contracts/dist/docs/PUBLISHING.docblock.js +0 -16
- package/dist/libs/contracts/dist/docs/accessibility_wcag_compliance_specs.docblock.js +0 -16
- package/dist/libs/contracts/dist/docs/index.js +0 -29
- package/dist/libs/contracts/dist/docs/presentations.js +0 -71
- package/dist/libs/contracts/dist/docs/registry.js +0 -44
- package/dist/libs/contracts/dist/docs/tech/PHASE_1_QUICKSTART.docblock.js +0 -16
- package/dist/libs/contracts/dist/docs/tech/PHASE_2_AI_NATIVE_OPERATIONS.docblock.js +0 -16
- package/dist/libs/contracts/dist/docs/tech/PHASE_3_AUTO_EVOLUTION.docblock.js +0 -16
- package/dist/libs/contracts/dist/docs/tech/PHASE_4_PERSONALIZATION_ENGINE.docblock.js +0 -16
- package/dist/libs/contracts/dist/docs/tech/PHASE_5_ZERO_TOUCH_OPERATIONS.docblock.js +0 -16
- package/dist/libs/contracts/dist/docs/tech/auth/better-auth-nextjs.docblock.js +0 -80
- package/dist/libs/contracts/dist/docs/tech/contracts/openapi-export.docblock.js +0 -57
- package/dist/libs/contracts/dist/docs/tech/lifecycle-stage-system.docblock.js +0 -16
- package/dist/libs/contracts/dist/docs/tech/llm/llm-integration.docblock.js +0 -357
- package/dist/libs/contracts/dist/docs/tech/mcp-endpoints.docblock.js +0 -37
- package/dist/libs/contracts/dist/docs/tech/presentation-runtime.docblock.js +0 -16
- package/dist/libs/contracts/dist/docs/tech/schema/README.docblock.js +0 -20
- package/dist/libs/contracts/dist/docs/tech/studio/learning-events.docblock.js +0 -48
- package/dist/libs/contracts/dist/docs/tech/studio/learning-journeys.docblock.js +0 -79
- package/dist/libs/contracts/dist/docs/tech/studio/platform-admin-panel.docblock.js +0 -84
- package/dist/libs/contracts/dist/docs/tech/studio/project-access-teams.docblock.js +0 -45
- package/dist/libs/contracts/dist/docs/tech/studio/project-routing.docblock.js +0 -67
- package/dist/libs/contracts/dist/docs/tech/studio/sandbox-unlogged.docblock.js +0 -40
- package/dist/libs/contracts/dist/docs/tech/studio/team-invitations.docblock.js +0 -69
- package/dist/libs/contracts/dist/docs/tech/studio/workspace-ops.docblock.js +0 -47
- package/dist/libs/contracts/dist/docs/tech/studio/workspaces.docblock.js +0 -62
- package/dist/libs/contracts/dist/docs/tech/telemetry-ingest.docblock.js +0 -155
- package/dist/libs/contracts/dist/docs/tech/templates/runtime.docblock.js +0 -20
- package/dist/libs/contracts/dist/docs/tech/vscode-extension.docblock.js +0 -101
- package/dist/libs/contracts/dist/docs/tech/workflows/overview.docblock.js +0 -20
- package/dist/libs/design-system/dist/_virtual/rolldown_runtime.js +0 -5
- package/dist/libs/design-system/dist/components/atoms/Button.js +0 -33
- package/dist/libs/design-system/dist/ui-kit-web/dist/ui/button.js +0 -55
- package/dist/libs/design-system/dist/ui-kit-web/dist/ui-kit-core/dist/utils.js +0 -13
- package/dist/libs/ui-kit-web/dist/ui/card.js +0 -36
- package/dist/libs/ui-kit-web/dist/ui/utils.js +0 -10
- package/dist/libs/ui-kit-web/dist/ui-kit-core/dist/utils.js +0 -10
- package/dist/views/Overview.d.ts +0 -14
- package/dist/views/Overview.js +0 -163
- package/dist/views/Progress.d.ts +0 -10
- package/dist/views/Progress.js +0 -144
- package/dist/views/Steps.d.ts +0 -11
- package/dist/views/Steps.js +0 -55
- package/dist/views/Timeline.d.ts +0 -10
- package/dist/views/Timeline.js +0 -132
- package/dist/views/index.d.ts +0 -5
- package/dist/views/index.js +0 -6
|
@@ -0,0 +1,467 @@
|
|
|
1
|
+
import { n as MasteryRing, r as FlashCard, t as DayCalendar } from "./DayCalendar-Cha869Bi.mjs";
|
|
2
|
+
import { Card, CardContent, CardHeader, CardTitle } from "@lssm/lib.ui-kit-web/ui/card";
|
|
3
|
+
import { BadgeDisplay, StreakCounter, XpBar } from "@lssm/example.learning-journey-ui-shared";
|
|
4
|
+
import { Button } from "@lssm/lib.design-system";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
|
|
7
|
+
//#region src/views/Overview.tsx
|
|
8
|
+
function Overview({ track, progress, onStart }) {
|
|
9
|
+
const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) + (track.completionRewards?.xpBonus ?? 0);
|
|
10
|
+
const completedSteps = progress.completedStepIds.length;
|
|
11
|
+
const totalSteps = track.steps.length;
|
|
12
|
+
const isComplete = completedSteps === totalSteps;
|
|
13
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
14
|
+
className: "space-y-6",
|
|
15
|
+
children: [
|
|
16
|
+
/* @__PURE__ */ jsx(Card, {
|
|
17
|
+
className: "overflow-hidden bg-gradient-to-br from-violet-500/10 via-purple-500/10 to-fuchsia-500/10",
|
|
18
|
+
children: /* @__PURE__ */ jsx(CardContent, {
|
|
19
|
+
className: "p-6",
|
|
20
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
21
|
+
className: "flex flex-col items-center gap-4 text-center md:flex-row md:text-left",
|
|
22
|
+
children: [
|
|
23
|
+
/* @__PURE__ */ jsx("div", {
|
|
24
|
+
className: "flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 to-purple-600 text-4xl shadow-lg",
|
|
25
|
+
children: isComplete ? "🏆" : "🎯"
|
|
26
|
+
}),
|
|
27
|
+
/* @__PURE__ */ jsxs("div", {
|
|
28
|
+
className: "flex-1",
|
|
29
|
+
children: [/* @__PURE__ */ jsx("h1", {
|
|
30
|
+
className: "text-2xl font-bold",
|
|
31
|
+
children: track.name
|
|
32
|
+
}), /* @__PURE__ */ jsx("p", {
|
|
33
|
+
className: "text-muted-foreground mt-1",
|
|
34
|
+
children: track.description
|
|
35
|
+
})]
|
|
36
|
+
}),
|
|
37
|
+
/* @__PURE__ */ jsx("div", {
|
|
38
|
+
className: "flex items-center gap-3",
|
|
39
|
+
children: /* @__PURE__ */ jsx(StreakCounter, {
|
|
40
|
+
days: progress.streakDays,
|
|
41
|
+
size: "lg"
|
|
42
|
+
})
|
|
43
|
+
})
|
|
44
|
+
]
|
|
45
|
+
})
|
|
46
|
+
})
|
|
47
|
+
}),
|
|
48
|
+
/* @__PURE__ */ jsxs("div", {
|
|
49
|
+
className: "grid gap-4 md:grid-cols-3",
|
|
50
|
+
children: [
|
|
51
|
+
/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
|
|
52
|
+
className: "pb-2",
|
|
53
|
+
children: /* @__PURE__ */ jsx(CardTitle, {
|
|
54
|
+
className: "text-muted-foreground text-sm font-medium",
|
|
55
|
+
children: "XP Progress"
|
|
56
|
+
})
|
|
57
|
+
}), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx("div", {
|
|
58
|
+
className: "text-3xl font-bold text-violet-500",
|
|
59
|
+
children: progress.xpEarned.toLocaleString()
|
|
60
|
+
}), /* @__PURE__ */ jsx(XpBar, {
|
|
61
|
+
current: progress.xpEarned,
|
|
62
|
+
max: totalXp,
|
|
63
|
+
showLabel: false,
|
|
64
|
+
size: "sm"
|
|
65
|
+
})] })] }),
|
|
66
|
+
/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
|
|
67
|
+
className: "pb-2",
|
|
68
|
+
children: /* @__PURE__ */ jsx(CardTitle, {
|
|
69
|
+
className: "text-muted-foreground text-sm font-medium",
|
|
70
|
+
children: "Steps Completed"
|
|
71
|
+
})
|
|
72
|
+
}), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsxs("div", {
|
|
73
|
+
className: "text-3xl font-bold",
|
|
74
|
+
children: [
|
|
75
|
+
completedSteps,
|
|
76
|
+
" ",
|
|
77
|
+
/* @__PURE__ */ jsxs("span", {
|
|
78
|
+
className: "text-muted-foreground text-lg",
|
|
79
|
+
children: ["/ ", totalSteps]
|
|
80
|
+
})
|
|
81
|
+
]
|
|
82
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
83
|
+
className: "bg-muted mt-2 h-2 w-full overflow-hidden rounded-full",
|
|
84
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
85
|
+
className: "h-full bg-green-500 transition-all duration-500",
|
|
86
|
+
style: { width: `${completedSteps / totalSteps * 100}%` }
|
|
87
|
+
})
|
|
88
|
+
})] })] }),
|
|
89
|
+
/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
|
|
90
|
+
className: "pb-2",
|
|
91
|
+
children: /* @__PURE__ */ jsx(CardTitle, {
|
|
92
|
+
className: "text-muted-foreground text-sm font-medium",
|
|
93
|
+
children: "Badges Earned"
|
|
94
|
+
})
|
|
95
|
+
}), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(BadgeDisplay, {
|
|
96
|
+
badges: progress.badges,
|
|
97
|
+
size: "lg"
|
|
98
|
+
}) })] })
|
|
99
|
+
]
|
|
100
|
+
}),
|
|
101
|
+
!isComplete && /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
|
|
102
|
+
className: "flex items-center gap-2",
|
|
103
|
+
children: [/* @__PURE__ */ jsx("span", { children: "🎯" }), /* @__PURE__ */ jsx("span", { children: "Next Challenge" })]
|
|
104
|
+
}) }), /* @__PURE__ */ jsx(CardContent, { children: (() => {
|
|
105
|
+
const nextStep = track.steps.find((s) => !progress.completedStepIds.includes(s.id));
|
|
106
|
+
if (!nextStep) return null;
|
|
107
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
108
|
+
className: "flex items-center justify-between gap-4",
|
|
109
|
+
children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
|
|
110
|
+
className: "font-semibold",
|
|
111
|
+
children: nextStep.title
|
|
112
|
+
}), /* @__PURE__ */ jsx("p", {
|
|
113
|
+
className: "text-muted-foreground text-sm",
|
|
114
|
+
children: nextStep.description
|
|
115
|
+
})] }), /* @__PURE__ */ jsxs("div", {
|
|
116
|
+
className: "flex items-center gap-3",
|
|
117
|
+
children: [nextStep.xpReward && /* @__PURE__ */ jsxs("span", {
|
|
118
|
+
className: "rounded-full bg-green-500/10 px-3 py-1 text-sm font-semibold text-green-500",
|
|
119
|
+
children: [
|
|
120
|
+
"+",
|
|
121
|
+
nextStep.xpReward,
|
|
122
|
+
" XP"
|
|
123
|
+
]
|
|
124
|
+
}), /* @__PURE__ */ jsx(Button, {
|
|
125
|
+
onClick: onStart,
|
|
126
|
+
children: "Start"
|
|
127
|
+
})]
|
|
128
|
+
})]
|
|
129
|
+
});
|
|
130
|
+
})() })] }),
|
|
131
|
+
isComplete && /* @__PURE__ */ jsx(Card, {
|
|
132
|
+
className: "border-green-500/50 bg-green-500/5",
|
|
133
|
+
children: /* @__PURE__ */ jsxs(CardContent, {
|
|
134
|
+
className: "flex items-center gap-4 p-6",
|
|
135
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
136
|
+
className: "text-4xl",
|
|
137
|
+
children: "🎉"
|
|
138
|
+
}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
|
|
139
|
+
className: "text-lg font-semibold text-green-500",
|
|
140
|
+
children: "Track Complete!"
|
|
141
|
+
}), /* @__PURE__ */ jsxs("p", {
|
|
142
|
+
className: "text-muted-foreground",
|
|
143
|
+
children: [
|
|
144
|
+
"You've mastered all ",
|
|
145
|
+
totalSteps,
|
|
146
|
+
" challenges and earned",
|
|
147
|
+
" ",
|
|
148
|
+
progress.xpEarned,
|
|
149
|
+
" XP."
|
|
150
|
+
]
|
|
151
|
+
})] })]
|
|
152
|
+
})
|
|
153
|
+
})
|
|
154
|
+
]
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
//#endregion
|
|
159
|
+
//#region src/views/Steps.tsx
|
|
160
|
+
function Steps({ track, progress, onStepComplete }) {
|
|
161
|
+
const currentStepIndex = track.steps.findIndex((s) => !progress.completedStepIds.includes(s.id));
|
|
162
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
163
|
+
className: "space-y-6",
|
|
164
|
+
children: [
|
|
165
|
+
/* @__PURE__ */ jsxs("div", {
|
|
166
|
+
className: "text-center",
|
|
167
|
+
children: [/* @__PURE__ */ jsx("h2", {
|
|
168
|
+
className: "text-xl font-bold",
|
|
169
|
+
children: "Complete Your Challenges"
|
|
170
|
+
}), /* @__PURE__ */ jsx("p", {
|
|
171
|
+
className: "text-muted-foreground",
|
|
172
|
+
children: "Tap each card to reveal the action, then mark as complete"
|
|
173
|
+
})]
|
|
174
|
+
}),
|
|
175
|
+
/* @__PURE__ */ jsx("div", {
|
|
176
|
+
className: "grid gap-4 md:grid-cols-2",
|
|
177
|
+
children: track.steps.map((step, index) => {
|
|
178
|
+
return /* @__PURE__ */ jsx(FlashCard, {
|
|
179
|
+
step,
|
|
180
|
+
isCompleted: progress.completedStepIds.includes(step.id),
|
|
181
|
+
isCurrent: index === currentStepIndex,
|
|
182
|
+
onComplete: () => onStepComplete?.(step.id)
|
|
183
|
+
}, step.id);
|
|
184
|
+
})
|
|
185
|
+
}),
|
|
186
|
+
/* @__PURE__ */ jsxs("div", {
|
|
187
|
+
className: "text-muted-foreground text-center text-sm",
|
|
188
|
+
children: [
|
|
189
|
+
progress.completedStepIds.length,
|
|
190
|
+
" of ",
|
|
191
|
+
track.steps.length,
|
|
192
|
+
" completed",
|
|
193
|
+
track.completionRewards?.xpBonus && /* @__PURE__ */ jsxs("span", {
|
|
194
|
+
className: "ml-2 text-green-500",
|
|
195
|
+
children: [
|
|
196
|
+
"(+",
|
|
197
|
+
track.completionRewards.xpBonus,
|
|
198
|
+
" XP bonus on completion)"
|
|
199
|
+
]
|
|
200
|
+
})
|
|
201
|
+
]
|
|
202
|
+
})
|
|
203
|
+
]
|
|
204
|
+
});
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
//#endregion
|
|
208
|
+
//#region src/views/Progress.tsx
|
|
209
|
+
function Progress({ track, progress }) {
|
|
210
|
+
const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) + (track.completionRewards?.xpBonus ?? 0);
|
|
211
|
+
const completedSteps = progress.completedStepIds.length;
|
|
212
|
+
const totalSteps = track.steps.length;
|
|
213
|
+
const percentComplete = totalSteps > 0 ? completedSteps / totalSteps * 100 : 0;
|
|
214
|
+
const surfaces = /* @__PURE__ */ new Map();
|
|
215
|
+
track.steps.forEach((step) => {
|
|
216
|
+
const surface = step.metadata?.surface ?? "general";
|
|
217
|
+
const current = surfaces.get(surface) ?? {
|
|
218
|
+
total: 0,
|
|
219
|
+
completed: 0
|
|
220
|
+
};
|
|
221
|
+
surfaces.set(surface, {
|
|
222
|
+
total: current.total + 1,
|
|
223
|
+
completed: current.completed + (progress.completedStepIds.includes(step.id) ? 1 : 0)
|
|
224
|
+
});
|
|
225
|
+
});
|
|
226
|
+
const surfaceColors = [
|
|
227
|
+
"green",
|
|
228
|
+
"blue",
|
|
229
|
+
"violet",
|
|
230
|
+
"orange"
|
|
231
|
+
];
|
|
232
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
233
|
+
className: "space-y-6",
|
|
234
|
+
children: [
|
|
235
|
+
/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
|
|
236
|
+
className: "flex items-center gap-2",
|
|
237
|
+
children: [/* @__PURE__ */ jsx("span", { children: "⚡" }), /* @__PURE__ */ jsx("span", { children: "Experience Points" })]
|
|
238
|
+
}) }), /* @__PURE__ */ jsxs(CardContent, {
|
|
239
|
+
className: "space-y-4",
|
|
240
|
+
children: [
|
|
241
|
+
/* @__PURE__ */ jsxs("div", {
|
|
242
|
+
className: "flex items-baseline gap-2",
|
|
243
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
244
|
+
className: "text-4xl font-bold text-violet-500",
|
|
245
|
+
children: progress.xpEarned.toLocaleString()
|
|
246
|
+
}), /* @__PURE__ */ jsxs("span", {
|
|
247
|
+
className: "text-muted-foreground",
|
|
248
|
+
children: [
|
|
249
|
+
"/ ",
|
|
250
|
+
totalXp.toLocaleString(),
|
|
251
|
+
" XP"
|
|
252
|
+
]
|
|
253
|
+
})]
|
|
254
|
+
}),
|
|
255
|
+
/* @__PURE__ */ jsx(XpBar, {
|
|
256
|
+
current: progress.xpEarned,
|
|
257
|
+
max: totalXp,
|
|
258
|
+
showLabel: false,
|
|
259
|
+
size: "lg"
|
|
260
|
+
}),
|
|
261
|
+
track.completionRewards?.xpBonus && percentComplete < 100 && /* @__PURE__ */ jsxs("p", {
|
|
262
|
+
className: "text-muted-foreground text-sm",
|
|
263
|
+
children: [
|
|
264
|
+
"🎁 Complete all steps for a",
|
|
265
|
+
" ",
|
|
266
|
+
/* @__PURE__ */ jsxs("span", {
|
|
267
|
+
className: "font-semibold text-green-500",
|
|
268
|
+
children: [
|
|
269
|
+
"+",
|
|
270
|
+
track.completionRewards.xpBonus,
|
|
271
|
+
" XP"
|
|
272
|
+
]
|
|
273
|
+
}),
|
|
274
|
+
" ",
|
|
275
|
+
"bonus!"
|
|
276
|
+
]
|
|
277
|
+
})
|
|
278
|
+
]
|
|
279
|
+
})] }),
|
|
280
|
+
/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
|
|
281
|
+
className: "flex items-center gap-2",
|
|
282
|
+
children: [/* @__PURE__ */ jsx("span", { children: "🎯" }), /* @__PURE__ */ jsx("span", { children: "Skill Mastery" })]
|
|
283
|
+
}) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", {
|
|
284
|
+
className: "flex flex-wrap justify-center gap-6",
|
|
285
|
+
children: [Array.from(surfaces.entries()).map(([surface, data], index) => /* @__PURE__ */ jsx(MasteryRing, {
|
|
286
|
+
label: surface.charAt(0).toUpperCase() + surface.slice(1),
|
|
287
|
+
percentage: data.completed / data.total * 100,
|
|
288
|
+
color: surfaceColors[index % surfaceColors.length],
|
|
289
|
+
size: "lg"
|
|
290
|
+
}, surface)), /* @__PURE__ */ jsx(MasteryRing, {
|
|
291
|
+
label: "Overall",
|
|
292
|
+
percentage: percentComplete,
|
|
293
|
+
color: "violet",
|
|
294
|
+
size: "lg"
|
|
295
|
+
})]
|
|
296
|
+
}) })] }),
|
|
297
|
+
/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
|
|
298
|
+
className: "flex items-center gap-2",
|
|
299
|
+
children: [/* @__PURE__ */ jsx("span", { children: "🏅" }), /* @__PURE__ */ jsx("span", { children: "Badges Earned" })]
|
|
300
|
+
}) }), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx(BadgeDisplay, {
|
|
301
|
+
badges: progress.badges,
|
|
302
|
+
size: "lg",
|
|
303
|
+
maxVisible: 10
|
|
304
|
+
}), progress.badges.length === 0 && /* @__PURE__ */ jsx("p", {
|
|
305
|
+
className: "text-muted-foreground text-sm",
|
|
306
|
+
children: "Complete the track to earn your first badge!"
|
|
307
|
+
})] })] }),
|
|
308
|
+
/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
|
|
309
|
+
className: "flex items-center gap-2",
|
|
310
|
+
children: [/* @__PURE__ */ jsx("span", { children: "📊" }), /* @__PURE__ */ jsx("span", { children: "Step Breakdown" })]
|
|
311
|
+
}) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
|
|
312
|
+
className: "space-y-2",
|
|
313
|
+
children: track.steps.map((step) => {
|
|
314
|
+
const isCompleted = progress.completedStepIds.includes(step.id);
|
|
315
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
316
|
+
className: "flex items-center justify-between rounded-lg border p-3",
|
|
317
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
318
|
+
className: "flex items-center gap-3",
|
|
319
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
320
|
+
className: isCompleted ? "text-green-500" : "text-muted-foreground",
|
|
321
|
+
children: isCompleted ? "✓" : "○"
|
|
322
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
323
|
+
className: isCompleted ? "text-foreground" : "text-muted-foreground",
|
|
324
|
+
children: step.title
|
|
325
|
+
})]
|
|
326
|
+
}), step.xpReward && /* @__PURE__ */ jsxs("span", {
|
|
327
|
+
className: `text-sm font-medium ${isCompleted ? "text-green-500" : "text-muted-foreground"}`,
|
|
328
|
+
children: [
|
|
329
|
+
isCompleted ? "+" : "",
|
|
330
|
+
step.xpReward,
|
|
331
|
+
" XP"
|
|
332
|
+
]
|
|
333
|
+
})]
|
|
334
|
+
}, step.id);
|
|
335
|
+
})
|
|
336
|
+
}) })] })
|
|
337
|
+
]
|
|
338
|
+
});
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
//#endregion
|
|
342
|
+
//#region src/views/Timeline.tsx
|
|
343
|
+
function Timeline({ track, progress }) {
|
|
344
|
+
if (track.steps.some((s) => s.availability?.unlockOnDay !== void 0)) {
|
|
345
|
+
const totalDays = Math.max(...track.steps.map((s) => s.availability?.unlockOnDay ?? 1), 7);
|
|
346
|
+
const completedDays = track.steps.filter((s) => progress.completedStepIds.includes(s.id)).map((s) => s.availability?.unlockOnDay ?? 1);
|
|
347
|
+
const currentDay = track.steps.find((s) => !progress.completedStepIds.includes(s.id))?.availability?.unlockOnDay ?? 1;
|
|
348
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
349
|
+
className: "space-y-6",
|
|
350
|
+
children: [
|
|
351
|
+
/* @__PURE__ */ jsxs("div", {
|
|
352
|
+
className: "text-center",
|
|
353
|
+
children: [/* @__PURE__ */ jsx("h2", {
|
|
354
|
+
className: "text-xl font-bold",
|
|
355
|
+
children: track.name
|
|
356
|
+
}), /* @__PURE__ */ jsx("p", {
|
|
357
|
+
className: "text-muted-foreground",
|
|
358
|
+
children: "Complete each day's challenge to progress"
|
|
359
|
+
})]
|
|
360
|
+
}),
|
|
361
|
+
/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
|
|
362
|
+
className: "flex items-center gap-2",
|
|
363
|
+
children: [/* @__PURE__ */ jsx("span", { children: "📅" }), /* @__PURE__ */ jsx("span", { children: "Your Journey" })]
|
|
364
|
+
}) }), /* @__PURE__ */ jsx(CardContent, {
|
|
365
|
+
className: "flex justify-center",
|
|
366
|
+
children: /* @__PURE__ */ jsx(DayCalendar, {
|
|
367
|
+
totalDays,
|
|
368
|
+
currentDay,
|
|
369
|
+
completedDays
|
|
370
|
+
})
|
|
371
|
+
})] }),
|
|
372
|
+
/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
|
|
373
|
+
className: "flex items-center gap-2",
|
|
374
|
+
children: [/* @__PURE__ */ jsx("span", { children: "📝" }), /* @__PURE__ */ jsx("span", { children: "Daily Challenges" })]
|
|
375
|
+
}) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
|
|
376
|
+
className: "space-y-3",
|
|
377
|
+
children: track.steps.map((step) => {
|
|
378
|
+
const day = step.availability?.unlockOnDay ?? 1;
|
|
379
|
+
const isCompleted = progress.completedStepIds.includes(step.id);
|
|
380
|
+
const isLocked = day > currentDay;
|
|
381
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
382
|
+
className: `flex items-start gap-4 rounded-lg border p-4 ${isLocked ? "opacity-50" : ""}`,
|
|
383
|
+
children: [
|
|
384
|
+
/* @__PURE__ */ jsx("div", {
|
|
385
|
+
className: "bg-muted flex h-10 w-10 shrink-0 items-center justify-center rounded-lg font-semibold",
|
|
386
|
+
children: isCompleted ? "✓" : isLocked ? "🔒" : day
|
|
387
|
+
}),
|
|
388
|
+
/* @__PURE__ */ jsxs("div", {
|
|
389
|
+
className: "flex-1",
|
|
390
|
+
children: [/* @__PURE__ */ jsx("h4", {
|
|
391
|
+
className: "font-semibold",
|
|
392
|
+
children: step.title
|
|
393
|
+
}), /* @__PURE__ */ jsx("p", {
|
|
394
|
+
className: "text-muted-foreground text-sm",
|
|
395
|
+
children: step.description
|
|
396
|
+
})]
|
|
397
|
+
}),
|
|
398
|
+
step.xpReward && /* @__PURE__ */ jsxs("span", {
|
|
399
|
+
className: `text-sm font-medium ${isCompleted ? "text-green-500" : "text-muted-foreground"}`,
|
|
400
|
+
children: [
|
|
401
|
+
"+",
|
|
402
|
+
step.xpReward,
|
|
403
|
+
" XP"
|
|
404
|
+
]
|
|
405
|
+
})
|
|
406
|
+
]
|
|
407
|
+
}, step.id);
|
|
408
|
+
})
|
|
409
|
+
}) })] })
|
|
410
|
+
]
|
|
411
|
+
});
|
|
412
|
+
}
|
|
413
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
414
|
+
className: "space-y-6",
|
|
415
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
416
|
+
className: "text-center",
|
|
417
|
+
children: [/* @__PURE__ */ jsx("h2", {
|
|
418
|
+
className: "text-xl font-bold",
|
|
419
|
+
children: "Learning Path"
|
|
420
|
+
}), /* @__PURE__ */ jsx("p", {
|
|
421
|
+
className: "text-muted-foreground",
|
|
422
|
+
children: "Follow the steps to master this skill"
|
|
423
|
+
})]
|
|
424
|
+
}), /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, {
|
|
425
|
+
className: "p-6",
|
|
426
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
427
|
+
className: "relative",
|
|
428
|
+
children: [/* @__PURE__ */ jsx("div", { className: "bg-border absolute top-0 left-5 h-full w-0.5" }), /* @__PURE__ */ jsx("div", {
|
|
429
|
+
className: "space-y-6",
|
|
430
|
+
children: track.steps.map((step, index) => {
|
|
431
|
+
const isCompleted = progress.completedStepIds.includes(step.id);
|
|
432
|
+
const isCurrent = !isCompleted && track.steps.slice(0, index).every((s) => progress.completedStepIds.includes(s.id));
|
|
433
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
434
|
+
className: "relative flex gap-4 pl-2",
|
|
435
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
436
|
+
className: `relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 ${isCompleted ? "border-green-500 bg-green-500 text-white" : isCurrent ? "border-violet-500 bg-violet-500 text-white" : "border-border bg-background"}`,
|
|
437
|
+
children: isCompleted ? "✓" : index + 1
|
|
438
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
439
|
+
className: "flex-1 pb-4",
|
|
440
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
441
|
+
className: "flex items-start justify-between gap-2",
|
|
442
|
+
children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", {
|
|
443
|
+
className: `font-semibold ${isCompleted ? "text-foreground" : isCurrent ? "text-violet-500" : "text-muted-foreground"}`,
|
|
444
|
+
children: step.title
|
|
445
|
+
}), /* @__PURE__ */ jsx("p", {
|
|
446
|
+
className: "text-muted-foreground mt-1 text-sm",
|
|
447
|
+
children: step.description
|
|
448
|
+
})] }), step.xpReward && /* @__PURE__ */ jsxs("span", {
|
|
449
|
+
className: `shrink-0 rounded-full px-2 py-1 text-xs font-semibold ${isCompleted ? "bg-green-500/10 text-green-500" : "bg-muted text-muted-foreground"}`,
|
|
450
|
+
children: [
|
|
451
|
+
"+",
|
|
452
|
+
step.xpReward,
|
|
453
|
+
" XP"
|
|
454
|
+
]
|
|
455
|
+
})]
|
|
456
|
+
})
|
|
457
|
+
})]
|
|
458
|
+
}, step.id);
|
|
459
|
+
})
|
|
460
|
+
})]
|
|
461
|
+
})
|
|
462
|
+
}) })]
|
|
463
|
+
});
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
//#endregion
|
|
467
|
+
export { Overview as i, Progress as n, Steps as r, Timeline as t };
|
package/package.json
CHANGED
|
@@ -1,30 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lssm/example.learning-journey-ui-gamified",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.41.0",
|
|
4
4
|
"description": "Duolingo-style gamified learning UI for drills and quests.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
8
8
|
"exports": {
|
|
9
|
-
".": "./
|
|
10
|
-
"./
|
|
11
|
-
"./
|
|
12
|
-
"./
|
|
13
|
-
"./components
|
|
14
|
-
"./docs": "./dist/docs/index.js",
|
|
15
|
-
"./docs/learning-journey-ui-gamified.docblock": "./dist/docs/learning-journey-ui-gamified.docblock.js",
|
|
16
|
-
"./example": "./dist/example.js",
|
|
17
|
-
"./GamifiedMiniApp": "./dist/GamifiedMiniApp.js",
|
|
18
|
-
"./views": "./dist/views/index.js",
|
|
19
|
-
"./views/Overview": "./dist/views/Overview.js",
|
|
20
|
-
"./views/Progress": "./dist/views/Progress.js",
|
|
21
|
-
"./views/Steps": "./dist/views/Steps.js",
|
|
22
|
-
"./views/Timeline": "./dist/views/Timeline.js",
|
|
9
|
+
".": "./src/index.ts",
|
|
10
|
+
"./example": "./src/example.ts",
|
|
11
|
+
"./docs": "./src/docs/index.ts",
|
|
12
|
+
"./views": "./src/views/index.ts",
|
|
13
|
+
"./components": "./src/components/index.ts",
|
|
23
14
|
"./*": "./*"
|
|
24
15
|
},
|
|
25
16
|
"scripts": {
|
|
26
|
-
"publish:pkg": "bun publish --tolerate-republish --ignore-scripts --verbose",
|
|
27
|
-
"publish:pkg:canary": "bun publish:pkg --tag canary",
|
|
28
17
|
"build": "bun build:bundle && bun build:types",
|
|
29
18
|
"build:bundle": "tsdown",
|
|
30
19
|
"build:types": "tsc --noEmit",
|
|
@@ -36,19 +25,17 @@
|
|
|
36
25
|
"test": "bun test"
|
|
37
26
|
},
|
|
38
27
|
"dependencies": {
|
|
39
|
-
"@lssm/
|
|
40
|
-
"@lssm/
|
|
41
|
-
"@lssm/example.learning-journey-
|
|
42
|
-
"@lssm/
|
|
43
|
-
"@lssm/
|
|
44
|
-
"@lssm/
|
|
45
|
-
"@lssm/lib.design-system": "0.0.0-canary-20251217083314",
|
|
46
|
-
"@lssm/lib.ui-kit-web": "0.0.0-canary-20251217083314",
|
|
28
|
+
"@lssm/example.learning-journey-ui-shared": "workspace:*",
|
|
29
|
+
"@lssm/example.learning-journey-duo-drills": "workspace:*",
|
|
30
|
+
"@lssm/example.learning-journey-quest-challenges": "workspace:*",
|
|
31
|
+
"@lssm/module.learning-journey": "workspace:*",
|
|
32
|
+
"@lssm/lib.design-system": "workspace:*",
|
|
33
|
+
"@lssm/lib.ui-kit-web": "workspace:*",
|
|
47
34
|
"react": "^19.2.3"
|
|
48
35
|
},
|
|
49
36
|
"devDependencies": {
|
|
50
|
-
"@lssm/tool.tsdown": "
|
|
51
|
-
"@lssm/tool.typescript": "
|
|
37
|
+
"@lssm/tool.tsdown": "workspace:*",
|
|
38
|
+
"@lssm/tool.typescript": "workspace:*",
|
|
52
39
|
"@types/react": "^19.1.6",
|
|
53
40
|
"tsdown": "^0.17.4",
|
|
54
41
|
"typescript": "^5.9.3"
|