@lssm/example.learning-journey-ui-gamified 0.0.0-canary-20251217080011 → 0.0.0-canary-20251217083314

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.
Files changed (126) hide show
  1. package/.turbo/turbo-build$colon$bundle.log +395 -14
  2. package/CHANGELOG.md +9 -9
  3. package/dist/GamifiedMiniApp.d.ts +16 -0
  4. package/dist/GamifiedMiniApp.js +64 -0
  5. package/dist/components/DayCalendar.d.ts +15 -0
  6. package/dist/components/DayCalendar.js +32 -0
  7. package/dist/components/FlashCard.d.ts +18 -0
  8. package/dist/components/FlashCard.js +79 -0
  9. package/dist/components/MasteryRing.d.ts +17 -0
  10. package/dist/components/MasteryRing.js +81 -0
  11. package/dist/components/index.d.ts +4 -0
  12. package/dist/components/index.js +5 -0
  13. package/dist/docs/index.d.ts +1 -0
  14. package/dist/docs/index.js +1 -0
  15. package/dist/docs/learning-journey-ui-gamified.docblock.d.ts +1 -0
  16. package/dist/docs/learning-journey-ui-gamified.docblock.js +20 -0
  17. package/dist/{index.d.mts → example.d.ts} +1 -18
  18. package/dist/example.js +34 -0
  19. package/dist/examples/learning-journey-ui-shared/dist/components/BadgeDisplay.js +44 -0
  20. package/dist/examples/learning-journey-ui-shared/dist/components/StreakCounter.js +45 -0
  21. package/dist/examples/learning-journey-ui-shared/dist/components/ViewTabs.js +48 -0
  22. package/dist/examples/learning-journey-ui-shared/dist/components/XpBar.js +46 -0
  23. package/dist/examples/learning-journey-ui-shared/dist/components/index.js +4 -0
  24. package/dist/examples/learning-journey-ui-shared/dist/docs/index.js +1 -0
  25. package/dist/examples/learning-journey-ui-shared/dist/docs/learning-journey-ui-shared.docblock.js +20 -0
  26. package/dist/examples/learning-journey-ui-shared/dist/hooks/index.js +1 -0
  27. package/dist/examples/learning-journey-ui-shared/dist/hooks/useLearningProgress.js +73 -0
  28. package/dist/examples/learning-journey-ui-shared/dist/index.js +8 -0
  29. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/PUBLISHING.docblock.js +15 -0
  30. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/accessibility_wcag_compliance_specs.docblock.js +15 -0
  31. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/index.js +28 -0
  32. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/presentations.js +71 -0
  33. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/registry.js +44 -0
  34. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/PHASE_1_QUICKSTART.docblock.js +15 -0
  35. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/PHASE_2_AI_NATIVE_OPERATIONS.docblock.js +15 -0
  36. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/PHASE_3_AUTO_EVOLUTION.docblock.js +15 -0
  37. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/PHASE_4_PERSONALIZATION_ENGINE.docblock.js +15 -0
  38. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/PHASE_5_ZERO_TOUCH_OPERATIONS.docblock.js +15 -0
  39. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/auth/better-auth-nextjs.docblock.js +79 -0
  40. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/contracts/openapi-export.docblock.js +56 -0
  41. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/lifecycle-stage-system.docblock.js +15 -0
  42. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/llm/llm-integration.docblock.js +356 -0
  43. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/mcp-endpoints.docblock.js +36 -0
  44. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/presentation-runtime.docblock.js +15 -0
  45. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/schema/README.docblock.js +19 -0
  46. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/learning-events.docblock.js +47 -0
  47. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/learning-journeys.docblock.js +78 -0
  48. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/platform-admin-panel.docblock.js +83 -0
  49. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/project-access-teams.docblock.js +44 -0
  50. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/project-routing.docblock.js +66 -0
  51. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/sandbox-unlogged.docblock.js +39 -0
  52. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/team-invitations.docblock.js +68 -0
  53. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/workspace-ops.docblock.js +46 -0
  54. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/studio/workspaces.docblock.js +61 -0
  55. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/telemetry-ingest.docblock.js +154 -0
  56. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/templates/runtime.docblock.js +19 -0
  57. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/vscode-extension.docblock.js +100 -0
  58. package/dist/examples/learning-journey-ui-shared/dist/libs/contracts/dist/docs/tech/workflows/overview.docblock.js +19 -0
  59. package/dist/examples/learning-journey-ui-shared/dist/libs/design-system/dist/_virtual/rolldown_runtime.js +5 -0
  60. package/dist/examples/learning-journey-ui-shared/dist/libs/design-system/dist/components/atoms/Button.js +33 -0
  61. package/dist/examples/learning-journey-ui-shared/dist/libs/design-system/dist/ui-kit-web/dist/ui/button.js +55 -0
  62. package/dist/examples/learning-journey-ui-shared/dist/libs/design-system/dist/ui-kit-web/dist/ui-kit-core/dist/utils.js +13 -0
  63. package/dist/examples/learning-journey-ui-shared/dist/libs/ui-kit-web/dist/ui/progress.js +23 -0
  64. package/dist/examples/learning-journey-ui-shared/dist/libs/ui-kit-web/dist/ui/utils.js +10 -0
  65. package/dist/examples/learning-journey-ui-shared/dist/libs/ui-kit-web/dist/ui-kit-core/dist/utils.js +10 -0
  66. package/dist/index.d.ts +12 -0
  67. package/dist/index.js +14 -0
  68. package/dist/libs/contracts/dist/docs/PUBLISHING.docblock.js +16 -0
  69. package/dist/libs/contracts/dist/docs/accessibility_wcag_compliance_specs.docblock.js +16 -0
  70. package/dist/libs/contracts/dist/docs/index.js +29 -0
  71. package/dist/libs/contracts/dist/docs/presentations.js +71 -0
  72. package/dist/libs/contracts/dist/docs/registry.js +44 -0
  73. package/dist/libs/contracts/dist/docs/tech/PHASE_1_QUICKSTART.docblock.js +16 -0
  74. package/dist/libs/contracts/dist/docs/tech/PHASE_2_AI_NATIVE_OPERATIONS.docblock.js +16 -0
  75. package/dist/libs/contracts/dist/docs/tech/PHASE_3_AUTO_EVOLUTION.docblock.js +16 -0
  76. package/dist/libs/contracts/dist/docs/tech/PHASE_4_PERSONALIZATION_ENGINE.docblock.js +16 -0
  77. package/dist/libs/contracts/dist/docs/tech/PHASE_5_ZERO_TOUCH_OPERATIONS.docblock.js +16 -0
  78. package/dist/libs/contracts/dist/docs/tech/auth/better-auth-nextjs.docblock.js +80 -0
  79. package/dist/libs/contracts/dist/docs/tech/contracts/openapi-export.docblock.js +57 -0
  80. package/dist/libs/contracts/dist/docs/tech/lifecycle-stage-system.docblock.js +16 -0
  81. package/dist/libs/contracts/dist/docs/tech/llm/llm-integration.docblock.js +357 -0
  82. package/dist/libs/contracts/dist/docs/tech/mcp-endpoints.docblock.js +37 -0
  83. package/dist/libs/contracts/dist/docs/tech/presentation-runtime.docblock.js +16 -0
  84. package/dist/libs/contracts/dist/docs/tech/schema/README.docblock.js +20 -0
  85. package/dist/libs/contracts/dist/docs/tech/studio/learning-events.docblock.js +48 -0
  86. package/dist/libs/contracts/dist/docs/tech/studio/learning-journeys.docblock.js +79 -0
  87. package/dist/libs/contracts/dist/docs/tech/studio/platform-admin-panel.docblock.js +84 -0
  88. package/dist/libs/contracts/dist/docs/tech/studio/project-access-teams.docblock.js +45 -0
  89. package/dist/libs/contracts/dist/docs/tech/studio/project-routing.docblock.js +67 -0
  90. package/dist/libs/contracts/dist/docs/tech/studio/sandbox-unlogged.docblock.js +40 -0
  91. package/dist/libs/contracts/dist/docs/tech/studio/team-invitations.docblock.js +69 -0
  92. package/dist/libs/contracts/dist/docs/tech/studio/workspace-ops.docblock.js +47 -0
  93. package/dist/libs/contracts/dist/docs/tech/studio/workspaces.docblock.js +62 -0
  94. package/dist/libs/contracts/dist/docs/tech/telemetry-ingest.docblock.js +155 -0
  95. package/dist/libs/contracts/dist/docs/tech/templates/runtime.docblock.js +20 -0
  96. package/dist/libs/contracts/dist/docs/tech/vscode-extension.docblock.js +101 -0
  97. package/dist/libs/contracts/dist/docs/tech/workflows/overview.docblock.js +20 -0
  98. package/dist/libs/design-system/dist/_virtual/rolldown_runtime.js +5 -0
  99. package/dist/libs/design-system/dist/components/atoms/Button.js +33 -0
  100. package/dist/libs/design-system/dist/ui-kit-web/dist/ui/button.js +55 -0
  101. package/dist/libs/design-system/dist/ui-kit-web/dist/ui-kit-core/dist/utils.js +13 -0
  102. package/dist/libs/ui-kit-web/dist/ui/card.js +36 -0
  103. package/dist/libs/ui-kit-web/dist/ui/utils.js +10 -0
  104. package/dist/libs/ui-kit-web/dist/ui-kit-core/dist/utils.js +10 -0
  105. package/dist/views/Overview.d.ts +14 -0
  106. package/dist/views/Overview.js +163 -0
  107. package/dist/views/Progress.d.ts +10 -0
  108. package/dist/views/Progress.js +144 -0
  109. package/dist/views/Steps.d.ts +11 -0
  110. package/dist/views/Steps.js +55 -0
  111. package/dist/views/Timeline.d.ts +10 -0
  112. package/dist/views/Timeline.js +132 -0
  113. package/dist/views/index.d.ts +5 -0
  114. package/dist/views/index.js +6 -0
  115. package/package.json +25 -16
  116. package/tsdown.config.js +14 -10
  117. package/dist/DayCalendar-Cha869Bi.mjs +0 -178
  118. package/dist/components/index.d.mts +0 -2
  119. package/dist/components/index.mjs +0 -4
  120. package/dist/components-kh0CpIG2.mjs +0 -1
  121. package/dist/index-Bc83ZTkD.d.mts +0 -33
  122. package/dist/index-C7CBKOil.d.mts +0 -44
  123. package/dist/index.mjs +0 -110
  124. package/dist/views/index.d.mts +0 -2
  125. package/dist/views/index.mjs +0 -4
  126. package/dist/views-B-DapxWu.mjs +0 -467
@@ -0,0 +1,144 @@
1
+ 'use client';
2
+
3
+ import { Card, CardContent, CardHeader, CardTitle } from "../libs/ui-kit-web/dist/ui/card.js";
4
+ import { XpBar } from "../examples/learning-journey-ui-shared/dist/components/XpBar.js";
5
+ import { BadgeDisplay } from "../examples/learning-journey-ui-shared/dist/components/BadgeDisplay.js";
6
+ import "../examples/learning-journey-ui-shared/dist/index.js";
7
+ import { MasteryRing } from "../components/MasteryRing.js";
8
+ import { jsx, jsxs } from "react/jsx-runtime";
9
+
10
+ //#region src/views/Progress.tsx
11
+ function Progress({ track, progress }) {
12
+ const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) + (track.completionRewards?.xpBonus ?? 0);
13
+ const completedSteps = progress.completedStepIds.length;
14
+ const totalSteps = track.steps.length;
15
+ const percentComplete = totalSteps > 0 ? completedSteps / totalSteps * 100 : 0;
16
+ const surfaces = /* @__PURE__ */ new Map();
17
+ track.steps.forEach((step) => {
18
+ const surface = step.metadata?.surface ?? "general";
19
+ const current = surfaces.get(surface) ?? {
20
+ total: 0,
21
+ completed: 0
22
+ };
23
+ surfaces.set(surface, {
24
+ total: current.total + 1,
25
+ completed: current.completed + (progress.completedStepIds.includes(step.id) ? 1 : 0)
26
+ });
27
+ });
28
+ const surfaceColors = [
29
+ "green",
30
+ "blue",
31
+ "violet",
32
+ "orange"
33
+ ];
34
+ return /* @__PURE__ */ jsxs("div", {
35
+ className: "space-y-6",
36
+ children: [
37
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
38
+ className: "flex items-center gap-2",
39
+ children: [/* @__PURE__ */ jsx("span", { children: "⚡" }), /* @__PURE__ */ jsx("span", { children: "Experience Points" })]
40
+ }) }), /* @__PURE__ */ jsxs(CardContent, {
41
+ className: "space-y-4",
42
+ children: [
43
+ /* @__PURE__ */ jsxs("div", {
44
+ className: "flex items-baseline gap-2",
45
+ children: [/* @__PURE__ */ jsx("span", {
46
+ className: "text-4xl font-bold text-violet-500",
47
+ children: progress.xpEarned.toLocaleString()
48
+ }), /* @__PURE__ */ jsxs("span", {
49
+ className: "text-muted-foreground",
50
+ children: [
51
+ "/ ",
52
+ totalXp.toLocaleString(),
53
+ " XP"
54
+ ]
55
+ })]
56
+ }),
57
+ /* @__PURE__ */ jsx(XpBar, {
58
+ current: progress.xpEarned,
59
+ max: totalXp,
60
+ showLabel: false,
61
+ size: "lg"
62
+ }),
63
+ track.completionRewards?.xpBonus && percentComplete < 100 && /* @__PURE__ */ jsxs("p", {
64
+ className: "text-muted-foreground text-sm",
65
+ children: [
66
+ "🎁 Complete all steps for a",
67
+ " ",
68
+ /* @__PURE__ */ jsxs("span", {
69
+ className: "font-semibold text-green-500",
70
+ children: [
71
+ "+",
72
+ track.completionRewards.xpBonus,
73
+ " XP"
74
+ ]
75
+ }),
76
+ " ",
77
+ "bonus!"
78
+ ]
79
+ })
80
+ ]
81
+ })] }),
82
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
83
+ className: "flex items-center gap-2",
84
+ children: [/* @__PURE__ */ jsx("span", { children: "🎯" }), /* @__PURE__ */ jsx("span", { children: "Skill Mastery" })]
85
+ }) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", {
86
+ className: "flex flex-wrap justify-center gap-6",
87
+ children: [Array.from(surfaces.entries()).map(([surface, data], index) => /* @__PURE__ */ jsx(MasteryRing, {
88
+ label: surface.charAt(0).toUpperCase() + surface.slice(1),
89
+ percentage: data.completed / data.total * 100,
90
+ color: surfaceColors[index % surfaceColors.length],
91
+ size: "lg"
92
+ }, surface)), /* @__PURE__ */ jsx(MasteryRing, {
93
+ label: "Overall",
94
+ percentage: percentComplete,
95
+ color: "violet",
96
+ size: "lg"
97
+ })]
98
+ }) })] }),
99
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
100
+ className: "flex items-center gap-2",
101
+ children: [/* @__PURE__ */ jsx("span", { children: "🏅" }), /* @__PURE__ */ jsx("span", { children: "Badges Earned" })]
102
+ }) }), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx(BadgeDisplay, {
103
+ badges: progress.badges,
104
+ size: "lg",
105
+ maxVisible: 10
106
+ }), progress.badges.length === 0 && /* @__PURE__ */ jsx("p", {
107
+ className: "text-muted-foreground text-sm",
108
+ children: "Complete the track to earn your first badge!"
109
+ })] })] }),
110
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
111
+ className: "flex items-center gap-2",
112
+ children: [/* @__PURE__ */ jsx("span", { children: "📊" }), /* @__PURE__ */ jsx("span", { children: "Step Breakdown" })]
113
+ }) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
114
+ className: "space-y-2",
115
+ children: track.steps.map((step) => {
116
+ const isCompleted = progress.completedStepIds.includes(step.id);
117
+ return /* @__PURE__ */ jsxs("div", {
118
+ className: "flex items-center justify-between rounded-lg border p-3",
119
+ children: [/* @__PURE__ */ jsxs("div", {
120
+ className: "flex items-center gap-3",
121
+ children: [/* @__PURE__ */ jsx("span", {
122
+ className: isCompleted ? "text-green-500" : "text-muted-foreground",
123
+ children: isCompleted ? "✓" : "○"
124
+ }), /* @__PURE__ */ jsx("span", {
125
+ className: isCompleted ? "text-foreground" : "text-muted-foreground",
126
+ children: step.title
127
+ })]
128
+ }), step.xpReward && /* @__PURE__ */ jsxs("span", {
129
+ className: `text-sm font-medium ${isCompleted ? "text-green-500" : "text-muted-foreground"}`,
130
+ children: [
131
+ isCompleted ? "+" : "",
132
+ step.xpReward,
133
+ " XP"
134
+ ]
135
+ })]
136
+ }, step.id);
137
+ })
138
+ }) })] })
139
+ ]
140
+ });
141
+ }
142
+
143
+ //#endregion
144
+ export { Progress };
@@ -0,0 +1,11 @@
1
+ import * as react_jsx_runtime2 from "react/jsx-runtime";
2
+ import { LearningViewProps } from "@lssm/example.learning-journey-ui-shared";
3
+
4
+ //#region src/views/Steps.d.ts
5
+ declare function Steps({
6
+ track,
7
+ progress,
8
+ onStepComplete
9
+ }: LearningViewProps): react_jsx_runtime2.JSX.Element;
10
+ //#endregion
11
+ export { Steps };
@@ -0,0 +1,55 @@
1
+ 'use client';
2
+
3
+ import { FlashCard } from "../components/FlashCard.js";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+
6
+ //#region src/views/Steps.tsx
7
+ function Steps({ track, progress, onStepComplete }) {
8
+ const currentStepIndex = track.steps.findIndex((s) => !progress.completedStepIds.includes(s.id));
9
+ return /* @__PURE__ */ jsxs("div", {
10
+ className: "space-y-6",
11
+ children: [
12
+ /* @__PURE__ */ jsxs("div", {
13
+ className: "text-center",
14
+ children: [/* @__PURE__ */ jsx("h2", {
15
+ className: "text-xl font-bold",
16
+ children: "Complete Your Challenges"
17
+ }), /* @__PURE__ */ jsx("p", {
18
+ className: "text-muted-foreground",
19
+ children: "Tap each card to reveal the action, then mark as complete"
20
+ })]
21
+ }),
22
+ /* @__PURE__ */ jsx("div", {
23
+ className: "grid gap-4 md:grid-cols-2",
24
+ children: track.steps.map((step, index) => {
25
+ return /* @__PURE__ */ jsx(FlashCard, {
26
+ step,
27
+ isCompleted: progress.completedStepIds.includes(step.id),
28
+ isCurrent: index === currentStepIndex,
29
+ onComplete: () => onStepComplete?.(step.id)
30
+ }, step.id);
31
+ })
32
+ }),
33
+ /* @__PURE__ */ jsxs("div", {
34
+ className: "text-muted-foreground text-center text-sm",
35
+ children: [
36
+ progress.completedStepIds.length,
37
+ " of ",
38
+ track.steps.length,
39
+ " completed",
40
+ track.completionRewards?.xpBonus && /* @__PURE__ */ jsxs("span", {
41
+ className: "ml-2 text-green-500",
42
+ children: [
43
+ "(+",
44
+ track.completionRewards.xpBonus,
45
+ " XP bonus on completion)"
46
+ ]
47
+ })
48
+ ]
49
+ })
50
+ ]
51
+ });
52
+ }
53
+
54
+ //#endregion
55
+ export { Steps };
@@ -0,0 +1,10 @@
1
+ import * as react_jsx_runtime6 from "react/jsx-runtime";
2
+ import { LearningViewProps } from "@lssm/example.learning-journey-ui-shared";
3
+
4
+ //#region src/views/Timeline.d.ts
5
+ declare function Timeline({
6
+ track,
7
+ progress
8
+ }: LearningViewProps): react_jsx_runtime6.JSX.Element;
9
+ //#endregion
10
+ export { Timeline };
@@ -0,0 +1,132 @@
1
+ 'use client';
2
+
3
+ import { Card, CardContent, CardHeader, CardTitle } from "../libs/ui-kit-web/dist/ui/card.js";
4
+ import { DayCalendar } from "../components/DayCalendar.js";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
6
+
7
+ //#region src/views/Timeline.tsx
8
+ function Timeline({ track, progress }) {
9
+ if (track.steps.some((s) => s.availability?.unlockOnDay !== void 0)) {
10
+ const totalDays = Math.max(...track.steps.map((s) => s.availability?.unlockOnDay ?? 1), 7);
11
+ const completedDays = track.steps.filter((s) => progress.completedStepIds.includes(s.id)).map((s) => s.availability?.unlockOnDay ?? 1);
12
+ const currentDay = track.steps.find((s) => !progress.completedStepIds.includes(s.id))?.availability?.unlockOnDay ?? 1;
13
+ return /* @__PURE__ */ jsxs("div", {
14
+ className: "space-y-6",
15
+ children: [
16
+ /* @__PURE__ */ jsxs("div", {
17
+ className: "text-center",
18
+ children: [/* @__PURE__ */ jsx("h2", {
19
+ className: "text-xl font-bold",
20
+ children: track.name
21
+ }), /* @__PURE__ */ jsx("p", {
22
+ className: "text-muted-foreground",
23
+ children: "Complete each day's challenge to progress"
24
+ })]
25
+ }),
26
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
27
+ className: "flex items-center gap-2",
28
+ children: [/* @__PURE__ */ jsx("span", { children: "📅" }), /* @__PURE__ */ jsx("span", { children: "Your Journey" })]
29
+ }) }), /* @__PURE__ */ jsx(CardContent, {
30
+ className: "flex justify-center",
31
+ children: /* @__PURE__ */ jsx(DayCalendar, {
32
+ totalDays,
33
+ currentDay,
34
+ completedDays
35
+ })
36
+ })] }),
37
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
38
+ className: "flex items-center gap-2",
39
+ children: [/* @__PURE__ */ jsx("span", { children: "📝" }), /* @__PURE__ */ jsx("span", { children: "Daily Challenges" })]
40
+ }) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
41
+ className: "space-y-3",
42
+ children: track.steps.map((step) => {
43
+ const day = step.availability?.unlockOnDay ?? 1;
44
+ const isCompleted = progress.completedStepIds.includes(step.id);
45
+ const isLocked = day > currentDay;
46
+ return /* @__PURE__ */ jsxs("div", {
47
+ className: `flex items-start gap-4 rounded-lg border p-4 ${isLocked ? "opacity-50" : ""}`,
48
+ children: [
49
+ /* @__PURE__ */ jsx("div", {
50
+ className: "bg-muted flex h-10 w-10 shrink-0 items-center justify-center rounded-lg font-semibold",
51
+ children: isCompleted ? "✓" : isLocked ? "🔒" : day
52
+ }),
53
+ /* @__PURE__ */ jsxs("div", {
54
+ className: "flex-1",
55
+ children: [/* @__PURE__ */ jsx("h4", {
56
+ className: "font-semibold",
57
+ children: step.title
58
+ }), /* @__PURE__ */ jsx("p", {
59
+ className: "text-muted-foreground text-sm",
60
+ children: step.description
61
+ })]
62
+ }),
63
+ step.xpReward && /* @__PURE__ */ jsxs("span", {
64
+ className: `text-sm font-medium ${isCompleted ? "text-green-500" : "text-muted-foreground"}`,
65
+ children: [
66
+ "+",
67
+ step.xpReward,
68
+ " XP"
69
+ ]
70
+ })
71
+ ]
72
+ }, step.id);
73
+ })
74
+ }) })] })
75
+ ]
76
+ });
77
+ }
78
+ return /* @__PURE__ */ jsxs("div", {
79
+ className: "space-y-6",
80
+ children: [/* @__PURE__ */ jsxs("div", {
81
+ className: "text-center",
82
+ children: [/* @__PURE__ */ jsx("h2", {
83
+ className: "text-xl font-bold",
84
+ children: "Learning Path"
85
+ }), /* @__PURE__ */ jsx("p", {
86
+ className: "text-muted-foreground",
87
+ children: "Follow the steps to master this skill"
88
+ })]
89
+ }), /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, {
90
+ className: "p-6",
91
+ children: /* @__PURE__ */ jsxs("div", {
92
+ className: "relative",
93
+ children: [/* @__PURE__ */ jsx("div", { className: "bg-border absolute top-0 left-5 h-full w-0.5" }), /* @__PURE__ */ jsx("div", {
94
+ className: "space-y-6",
95
+ children: track.steps.map((step, index) => {
96
+ const isCompleted = progress.completedStepIds.includes(step.id);
97
+ const isCurrent = !isCompleted && track.steps.slice(0, index).every((s) => progress.completedStepIds.includes(s.id));
98
+ return /* @__PURE__ */ jsxs("div", {
99
+ className: "relative flex gap-4 pl-2",
100
+ children: [/* @__PURE__ */ jsx("div", {
101
+ 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"}`,
102
+ children: isCompleted ? "✓" : index + 1
103
+ }), /* @__PURE__ */ jsx("div", {
104
+ className: "flex-1 pb-4",
105
+ children: /* @__PURE__ */ jsxs("div", {
106
+ className: "flex items-start justify-between gap-2",
107
+ children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", {
108
+ className: `font-semibold ${isCompleted ? "text-foreground" : isCurrent ? "text-violet-500" : "text-muted-foreground"}`,
109
+ children: step.title
110
+ }), /* @__PURE__ */ jsx("p", {
111
+ className: "text-muted-foreground mt-1 text-sm",
112
+ children: step.description
113
+ })] }), step.xpReward && /* @__PURE__ */ jsxs("span", {
114
+ 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"}`,
115
+ children: [
116
+ "+",
117
+ step.xpReward,
118
+ " XP"
119
+ ]
120
+ })]
121
+ })
122
+ })]
123
+ }, step.id);
124
+ })
125
+ })]
126
+ })
127
+ }) })]
128
+ });
129
+ }
130
+
131
+ //#endregion
132
+ export { Timeline };
@@ -0,0 +1,5 @@
1
+ import { Overview } from "./Overview.js";
2
+ import { Steps } from "./Steps.js";
3
+ import { Progress } from "./Progress.js";
4
+ import { Timeline } from "./Timeline.js";
5
+ export { Overview, Progress, Steps, Timeline };
@@ -0,0 +1,6 @@
1
+ import { Overview } from "./Overview.js";
2
+ import { Steps } from "./Steps.js";
3
+ import { Progress } from "./Progress.js";
4
+ import { Timeline } from "./Timeline.js";
5
+
6
+ export { Overview, Progress, Steps, Timeline };
package/package.json CHANGED
@@ -1,16 +1,25 @@
1
1
  {
2
2
  "name": "@lssm/example.learning-journey-ui-gamified",
3
- "version": "0.0.0-canary-20251217080011",
3
+ "version": "0.0.0-canary-20251217083314",
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
- ".": "./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",
9
+ ".": "./dist/index.js",
10
+ "./components": "./dist/components/index.js",
11
+ "./components/DayCalendar": "./dist/components/DayCalendar.js",
12
+ "./components/FlashCard": "./dist/components/FlashCard.js",
13
+ "./components/MasteryRing": "./dist/components/MasteryRing.js",
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",
14
23
  "./*": "./*"
15
24
  },
16
25
  "scripts": {
@@ -27,19 +36,19 @@
27
36
  "test": "bun test"
28
37
  },
29
38
  "dependencies": {
30
- "@lssm/lib.schema": "0.0.0-canary-20251217080011",
31
- "@lssm/lib.contracts": "0.0.0-canary-20251217080011",
32
- "@lssm/example.learning-journey-ui-shared": "0.0.0-canary-20251217080011",
33
- "@lssm/example.learning-journey-duo-drills": "0.0.0-canary-20251217080011",
34
- "@lssm/example.learning-journey-quest-challenges": "0.0.0-canary-20251217080011",
35
- "@lssm/module.learning-journey": "0.0.0-canary-20251217080011",
36
- "@lssm/lib.design-system": "0.0.0-canary-20251217080011",
37
- "@lssm/lib.ui-kit-web": "0.0.0-canary-20251217080011",
39
+ "@lssm/lib.schema": "0.0.0-canary-20251217083314",
40
+ "@lssm/lib.contracts": "0.0.0-canary-20251217083314",
41
+ "@lssm/example.learning-journey-ui-shared": "0.0.0-canary-20251217083314",
42
+ "@lssm/example.learning-journey-duo-drills": "0.0.0-canary-20251217083314",
43
+ "@lssm/example.learning-journey-quest-challenges": "0.0.0-canary-20251217083314",
44
+ "@lssm/module.learning-journey": "0.0.0-canary-20251217083314",
45
+ "@lssm/lib.design-system": "0.0.0-canary-20251217083314",
46
+ "@lssm/lib.ui-kit-web": "0.0.0-canary-20251217083314",
38
47
  "react": "^19.2.3"
39
48
  },
40
49
  "devDependencies": {
41
- "@lssm/tool.tsdown": "0.0.0-canary-20251217080011",
42
- "@lssm/tool.typescript": "0.0.0-canary-20251217080011",
50
+ "@lssm/tool.tsdown": "0.0.0-canary-20251217083314",
51
+ "@lssm/tool.typescript": "0.0.0-canary-20251217083314",
43
52
  "@types/react": "^19.1.6",
44
53
  "tsdown": "^0.17.4",
45
54
  "typescript": "^5.9.3"
package/tsdown.config.js CHANGED
@@ -1,13 +1,17 @@
1
1
  import { defineConfig } from 'tsdown';
2
+ import { moduleLibrary, withDevExports } from '@lssm/tool.tsdown';
3
+
4
+ export default defineConfig(() => ({
5
+ ...moduleLibrary,
6
+ ...withDevExports,
7
+ }));
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
2
16
 
3
- export default defineConfig({
4
- entry: [
5
- 'src/index.ts',
6
- 'src/views/index.ts',
7
- 'src/components/index.ts',
8
- ],
9
- format: 'esm',
10
- target: 'esnext',
11
- dts: true,
12
- });
13
17
 
@@ -1,178 +0,0 @@
1
- import { useState } from "react";
2
- import { Card, CardContent } from "@lssm/lib.ui-kit-web/ui/card";
3
- import { Button } from "@lssm/lib.design-system";
4
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
5
- import { cn } from "@lssm/lib.ui-kit-web/ui/utils";
6
-
7
- //#region src/components/FlashCard.tsx
8
- function FlashCard({ step, isCompleted, isCurrent, onComplete }) {
9
- const [isFlipped, setIsFlipped] = useState(false);
10
- return /* @__PURE__ */ jsx(Card, {
11
- className: cn("relative cursor-pointer overflow-hidden transition-all duration-300", isCurrent && "ring-primary ring-2", isCompleted && "opacity-60"),
12
- onClick: () => !isCompleted && setIsFlipped(!isFlipped),
13
- children: /* @__PURE__ */ jsxs(CardContent, {
14
- className: "p-6",
15
- children: [/* @__PURE__ */ jsxs("div", {
16
- className: cn("space-y-4 transition-opacity duration-200", isFlipped ? "opacity-0" : "opacity-100"),
17
- children: [
18
- /* @__PURE__ */ jsxs("div", {
19
- className: "flex items-start justify-between",
20
- children: [/* @__PURE__ */ jsxs("div", {
21
- className: "flex-1",
22
- children: [/* @__PURE__ */ jsx("h3", {
23
- className: "text-lg font-semibold",
24
- children: step.title
25
- }), step.description && /* @__PURE__ */ jsx("p", {
26
- className: "text-muted-foreground mt-1 text-sm",
27
- children: step.description
28
- })]
29
- }), step.xpReward && /* @__PURE__ */ jsxs("span", {
30
- className: "rounded-full bg-green-500/10 px-2 py-1 text-xs font-semibold text-green-500",
31
- children: [
32
- "+",
33
- step.xpReward,
34
- " XP"
35
- ]
36
- })]
37
- }),
38
- isCompleted && /* @__PURE__ */ jsxs("div", {
39
- className: "flex items-center gap-2 text-green-500",
40
- children: [/* @__PURE__ */ jsx("span", { children: "✓" }), /* @__PURE__ */ jsx("span", {
41
- className: "text-sm font-medium",
42
- children: "Completed"
43
- })]
44
- }),
45
- isCurrent && !isCompleted && /* @__PURE__ */ jsx("p", {
46
- className: "text-muted-foreground text-xs",
47
- children: "Tap to reveal action"
48
- })
49
- ]
50
- }), isFlipped && !isCompleted && /* @__PURE__ */ jsxs("div", {
51
- className: "absolute inset-0 flex flex-col items-center justify-center gap-4 bg-gradient-to-br from-violet-500/10 to-violet-600/10 p-6",
52
- children: [/* @__PURE__ */ jsx("p", {
53
- className: "text-center text-sm",
54
- children: step.instructions ?? "Complete this step to earn XP"
55
- }), /* @__PURE__ */ jsxs("div", {
56
- className: "flex gap-2",
57
- children: [/* @__PURE__ */ jsx(Button, {
58
- variant: "outline",
59
- size: "sm",
60
- onClick: () => setIsFlipped(false),
61
- children: "Back"
62
- }), /* @__PURE__ */ jsx(Button, {
63
- size: "sm",
64
- onClick: (e) => {
65
- e.stopPropagation();
66
- onComplete?.();
67
- },
68
- children: "Mark Complete"
69
- })]
70
- })]
71
- })]
72
- })
73
- });
74
- }
75
-
76
- //#endregion
77
- //#region src/components/MasteryRing.tsx
78
- const sizeStyles = {
79
- sm: {
80
- container: "h-16 w-16",
81
- text: "text-xs",
82
- ring: 48,
83
- stroke: 4
84
- },
85
- md: {
86
- container: "h-24 w-24",
87
- text: "text-sm",
88
- ring: 72,
89
- stroke: 6
90
- },
91
- lg: {
92
- container: "h-32 w-32",
93
- text: "text-base",
94
- ring: 96,
95
- stroke: 8
96
- }
97
- };
98
- const colorStyles = {
99
- green: "stroke-green-500",
100
- blue: "stroke-blue-500",
101
- violet: "stroke-violet-500",
102
- orange: "stroke-orange-500"
103
- };
104
- function MasteryRing({ label, percentage, size = "md", color = "violet" }) {
105
- const styles = sizeStyles[size];
106
- const radius = (styles.ring - styles.stroke) / 2;
107
- const circumference = 2 * Math.PI * radius;
108
- const strokeDashoffset = circumference - percentage / 100 * circumference;
109
- return /* @__PURE__ */ jsxs("div", {
110
- className: cn("relative flex flex-col items-center gap-1", styles.container),
111
- children: [
112
- /* @__PURE__ */ jsxs("svg", {
113
- className: "absolute -rotate-90",
114
- width: styles.ring,
115
- height: styles.ring,
116
- viewBox: `0 0 ${styles.ring} ${styles.ring}`,
117
- children: [/* @__PURE__ */ jsx("circle", {
118
- cx: styles.ring / 2,
119
- cy: styles.ring / 2,
120
- r: radius,
121
- fill: "none",
122
- strokeWidth: styles.stroke,
123
- className: "stroke-muted"
124
- }), /* @__PURE__ */ jsx("circle", {
125
- cx: styles.ring / 2,
126
- cy: styles.ring / 2,
127
- r: radius,
128
- fill: "none",
129
- strokeWidth: styles.stroke,
130
- strokeLinecap: "round",
131
- strokeDasharray: circumference,
132
- strokeDashoffset,
133
- className: cn("transition-all duration-500", colorStyles[color])
134
- })]
135
- }),
136
- /* @__PURE__ */ jsx("div", {
137
- className: "flex h-full flex-col items-center justify-center",
138
- children: /* @__PURE__ */ jsxs("span", {
139
- className: cn("font-bold", styles.text),
140
- children: [Math.round(percentage), "%"]
141
- })
142
- }),
143
- /* @__PURE__ */ jsx("span", {
144
- className: cn("text-muted-foreground mt-1 truncate", styles.text),
145
- children: label
146
- })
147
- ]
148
- });
149
- }
150
-
151
- //#endregion
152
- //#region src/components/DayCalendar.tsx
153
- function DayCalendar({ totalDays, currentDay, completedDays }) {
154
- return /* @__PURE__ */ jsx("div", {
155
- className: "grid grid-cols-7 gap-2",
156
- children: Array.from({ length: totalDays }, (_, i) => i + 1).map((day) => {
157
- const isCompleted = completedDays.includes(day);
158
- const isCurrent = day === currentDay;
159
- const isLocked = day > currentDay;
160
- return /* @__PURE__ */ jsx("div", {
161
- className: cn("flex h-12 w-12 flex-col items-center justify-center rounded-lg border text-sm font-medium transition-all", isCompleted && "border-green-500 bg-green-500/10 text-green-500", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/10 text-violet-500 ring-2 ring-violet-500/50", isLocked && "border-muted bg-muted/50 text-muted-foreground", !isCompleted && !isCurrent && !isLocked && "border-border bg-card"),
162
- children: isCompleted ? /* @__PURE__ */ jsx("span", {
163
- className: "text-lg",
164
- children: "✓"
165
- }) : isLocked ? /* @__PURE__ */ jsx("span", {
166
- className: "text-lg",
167
- children: "🔒"
168
- }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
169
- className: "text-muted-foreground text-xs",
170
- children: "Day"
171
- }), /* @__PURE__ */ jsx("span", { children: day })] })
172
- }, day);
173
- })
174
- });
175
- }
176
-
177
- //#endregion
178
- export { MasteryRing as n, FlashCard as r, DayCalendar as t };
@@ -1,2 +0,0 @@
1
- import { n as MasteryRing, r as FlashCard, t as DayCalendar } from "../index-C7CBKOil.mjs";
2
- export { DayCalendar, FlashCard, MasteryRing };
@@ -1,4 +0,0 @@
1
- import { n as MasteryRing, r as FlashCard, t as DayCalendar } from "../DayCalendar-Cha869Bi.mjs";
2
- import "../components-kh0CpIG2.mjs";
3
-
4
- export { DayCalendar, FlashCard, MasteryRing };
@@ -1 +0,0 @@
1
- export { };