@lssm/example.learning-journey-ui-onboarding 0.0.0-canary-20251217073102 → 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 +397 -14
  2. package/CHANGELOG.md +10 -10
  3. package/dist/OnboardingMiniApp.d.ts +16 -0
  4. package/dist/OnboardingMiniApp.js +64 -0
  5. package/dist/components/CodeSnippet.d.ts +15 -0
  6. package/dist/{components-OUN5S2z0.mjs → components/CodeSnippet.js} +5 -3
  7. package/dist/components/JourneyMap.d.ts +16 -0
  8. package/dist/components/JourneyMap.js +48 -0
  9. package/dist/components/StepChecklist.d.ts +24 -0
  10. package/dist/{JourneyMap-CZ47DksM.mjs → components/StepChecklist.js} +7 -48
  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-onboarding.docblock.d.ts +1 -0
  16. package/dist/docs/learning-journey-ui-onboarding.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 +4 -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-core/dist/utils.js +10 -0
  103. package/dist/libs/ui-kit-web/dist/ui/card.js +36 -0
  104. package/dist/libs/ui-kit-web/dist/ui/progress.js +23 -0
  105. package/dist/libs/ui-kit-web/dist/ui/utils.js +10 -0
  106. package/dist/libs/ui-kit-web/dist/ui-kit-core/dist/utils.js +10 -0
  107. package/dist/views/Overview.d.ts +14 -0
  108. package/dist/views/Overview.js +180 -0
  109. package/dist/views/Progress.d.ts +10 -0
  110. package/dist/views/Progress.js +162 -0
  111. package/dist/views/Steps.d.ts +11 -0
  112. package/dist/views/Steps.js +91 -0
  113. package/dist/views/Timeline.d.ts +10 -0
  114. package/dist/views/Timeline.js +97 -0
  115. package/dist/views/index.d.ts +5 -0
  116. package/dist/views/index.js +6 -0
  117. package/package.json +26 -17
  118. package/tsdown.config.js +14 -10
  119. package/dist/components/index.d.mts +0 -2
  120. package/dist/components/index.mjs +0 -4
  121. package/dist/index-BSiowBYJ.d.mts +0 -33
  122. package/dist/index-DOpWREi-.d.mts +0 -48
  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-BS9u6UnM.mjs +0 -504
@@ -0,0 +1,162 @@
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 { Progress } from "../libs/ui-kit-web/dist/ui/progress.js";
8
+ import { jsx, jsxs } from "react/jsx-runtime";
9
+
10
+ //#region src/views/Progress.tsx
11
+ function ProgressView({ track, progress }) {
12
+ const totalSteps = track.steps.length;
13
+ const completedSteps = progress.completedStepIds.length;
14
+ const percentComplete = totalSteps > 0 ? completedSteps / totalSteps * 100 : 0;
15
+ const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) + (track.completionRewards?.xpBonus ?? 0);
16
+ const remainingSteps = totalSteps - completedSteps;
17
+ const estimatedMinutes = remainingSteps * 5;
18
+ return /* @__PURE__ */ jsxs("div", {
19
+ className: "space-y-6",
20
+ children: [
21
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
22
+ className: "flex items-center gap-2",
23
+ children: [/* @__PURE__ */ jsx("span", { children: "📈" }), /* @__PURE__ */ jsx("span", { children: "Your Progress" })]
24
+ }) }), /* @__PURE__ */ jsxs(CardContent, {
25
+ className: "space-y-6",
26
+ children: [/* @__PURE__ */ jsx("div", {
27
+ className: "flex items-center justify-center",
28
+ children: /* @__PURE__ */ jsxs("div", {
29
+ className: "relative flex h-40 w-40 items-center justify-center",
30
+ children: [/* @__PURE__ */ jsxs("svg", {
31
+ className: "absolute h-full w-full -rotate-90",
32
+ viewBox: "0 0 100 100",
33
+ children: [/* @__PURE__ */ jsx("circle", {
34
+ cx: "50",
35
+ cy: "50",
36
+ r: "45",
37
+ fill: "none",
38
+ strokeWidth: "8",
39
+ className: "stroke-muted"
40
+ }), /* @__PURE__ */ jsx("circle", {
41
+ cx: "50",
42
+ cy: "50",
43
+ r: "45",
44
+ fill: "none",
45
+ strokeWidth: "8",
46
+ strokeLinecap: "round",
47
+ strokeDasharray: `${percentComplete * 2.83} 283`,
48
+ className: "stroke-blue-500 transition-all duration-500"
49
+ })]
50
+ }), /* @__PURE__ */ jsxs("div", {
51
+ className: "text-center",
52
+ children: [/* @__PURE__ */ jsxs("div", {
53
+ className: "text-3xl font-bold",
54
+ children: [Math.round(percentComplete), "%"]
55
+ }), /* @__PURE__ */ jsx("div", {
56
+ className: "text-muted-foreground text-sm",
57
+ children: "Complete"
58
+ })]
59
+ })]
60
+ })
61
+ }), /* @__PURE__ */ jsxs("div", {
62
+ className: "grid grid-cols-3 gap-4 text-center",
63
+ children: [
64
+ /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
65
+ className: "text-2xl font-bold text-green-500",
66
+ children: completedSteps
67
+ }), /* @__PURE__ */ jsx("div", {
68
+ className: "text-muted-foreground text-sm",
69
+ children: "Completed"
70
+ })] }),
71
+ /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
72
+ className: "text-2xl font-bold text-orange-500",
73
+ children: remainingSteps
74
+ }), /* @__PURE__ */ jsx("div", {
75
+ className: "text-muted-foreground text-sm",
76
+ children: "Remaining"
77
+ })] }),
78
+ /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
79
+ className: "text-2xl font-bold",
80
+ children: [estimatedMinutes, "m"]
81
+ }), /* @__PURE__ */ jsx("div", {
82
+ className: "text-muted-foreground text-sm",
83
+ children: "Est. Time"
84
+ })] })
85
+ ]
86
+ })]
87
+ })] }),
88
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
89
+ className: "flex items-center gap-2",
90
+ children: [/* @__PURE__ */ jsx("span", { children: "⚡" }), /* @__PURE__ */ jsx("span", { children: "Experience Points" })]
91
+ }) }), /* @__PURE__ */ jsxs(CardContent, {
92
+ className: "space-y-4",
93
+ children: [/* @__PURE__ */ jsxs("div", {
94
+ className: "flex items-baseline gap-2",
95
+ children: [/* @__PURE__ */ jsx("span", {
96
+ className: "text-3xl font-bold text-blue-500",
97
+ children: progress.xpEarned
98
+ }), /* @__PURE__ */ jsxs("span", {
99
+ className: "text-muted-foreground",
100
+ children: [
101
+ "/ ",
102
+ totalXp,
103
+ " XP"
104
+ ]
105
+ })]
106
+ }), /* @__PURE__ */ jsx(XpBar, {
107
+ current: progress.xpEarned,
108
+ max: totalXp,
109
+ showLabel: false,
110
+ size: "lg"
111
+ })]
112
+ })] }),
113
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
114
+ className: "flex items-center gap-2",
115
+ children: [/* @__PURE__ */ jsx("span", { children: "🏅" }), /* @__PURE__ */ jsx("span", { children: "Achievements" })]
116
+ }) }), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx(BadgeDisplay, {
117
+ badges: progress.badges,
118
+ size: "lg"
119
+ }), progress.badges.length === 0 && track.completionRewards?.badgeKey && /* @__PURE__ */ jsxs("p", {
120
+ className: "text-muted-foreground text-sm",
121
+ children: [
122
+ "Complete all steps to earn the \"",
123
+ track.completionRewards.badgeKey,
124
+ "\" badge!"
125
+ ]
126
+ })] })] }),
127
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
128
+ className: "flex items-center gap-2",
129
+ children: [/* @__PURE__ */ jsx("span", { children: "📋" }), /* @__PURE__ */ jsx("span", { children: "Step Details" })]
130
+ }) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
131
+ className: "space-y-3",
132
+ children: track.steps.map((step, index) => {
133
+ const isCompleted = progress.completedStepIds.includes(step.id);
134
+ const stepProgress = isCompleted ? 100 : 0;
135
+ return /* @__PURE__ */ jsxs("div", {
136
+ className: "space-y-1",
137
+ children: [/* @__PURE__ */ jsxs("div", {
138
+ className: "flex items-center justify-between text-sm",
139
+ children: [/* @__PURE__ */ jsxs("span", {
140
+ className: isCompleted ? "text-green-500" : "text-foreground",
141
+ children: [
142
+ index + 1,
143
+ ". ",
144
+ step.title
145
+ ]
146
+ }), /* @__PURE__ */ jsx("span", {
147
+ className: isCompleted ? "text-green-500" : "text-muted-foreground",
148
+ children: isCompleted ? "✓" : "Pending"
149
+ })]
150
+ }), /* @__PURE__ */ jsx(Progress, {
151
+ value: stepProgress,
152
+ className: "h-1"
153
+ })]
154
+ }, step.id);
155
+ })
156
+ }) })] })
157
+ ]
158
+ });
159
+ }
160
+
161
+ //#endregion
162
+ export { ProgressView as Progress, ProgressView };
@@ -0,0 +1,11 @@
1
+ import * as react_jsx_runtime0 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_runtime0.JSX.Element;
10
+ //#endregion
11
+ export { Steps };
@@ -0,0 +1,91 @@
1
+ 'use client';
2
+
3
+ import { Progress } from "../libs/ui-kit-web/dist/ui/progress.js";
4
+ import { StepChecklist } from "../components/StepChecklist.js";
5
+ import { useState } from "react";
6
+ import { jsx, jsxs } from "react/jsx-runtime";
7
+
8
+ //#region src/views/Steps.tsx
9
+ function Steps({ track, progress, onStepComplete }) {
10
+ const [expandedStepId, setExpandedStepId] = useState(() => {
11
+ return track.steps.find((s) => !progress.completedStepIds.includes(s.id))?.id ?? null;
12
+ });
13
+ const completedSteps = progress.completedStepIds.length;
14
+ const totalSteps = track.steps.length;
15
+ const percentComplete = totalSteps > 0 ? completedSteps / totalSteps * 100 : 0;
16
+ const currentStepIndex = track.steps.findIndex((s) => !progress.completedStepIds.includes(s.id));
17
+ return /* @__PURE__ */ jsxs("div", {
18
+ className: "space-y-6",
19
+ children: [
20
+ /* @__PURE__ */ jsxs("div", {
21
+ className: "space-y-2",
22
+ children: [/* @__PURE__ */ jsxs("div", {
23
+ className: "flex items-center justify-between",
24
+ children: [/* @__PURE__ */ jsx("h2", {
25
+ className: "text-xl font-bold",
26
+ children: "Complete Each Step"
27
+ }), /* @__PURE__ */ jsxs("span", {
28
+ className: "text-muted-foreground text-sm",
29
+ children: [
30
+ completedSteps,
31
+ " / ",
32
+ totalSteps,
33
+ " completed"
34
+ ]
35
+ })]
36
+ }), /* @__PURE__ */ jsx(Progress, {
37
+ value: percentComplete,
38
+ className: "h-2"
39
+ })]
40
+ }),
41
+ /* @__PURE__ */ jsx("div", {
42
+ className: "space-y-3",
43
+ children: track.steps.map((step, index) => {
44
+ const isCompleted = progress.completedStepIds.includes(step.id);
45
+ const isCurrent = index === currentStepIndex;
46
+ return /* @__PURE__ */ jsx(StepChecklist, {
47
+ step,
48
+ stepNumber: index + 1,
49
+ isCompleted,
50
+ isCurrent,
51
+ isExpanded: expandedStepId === step.id,
52
+ onToggle: () => setExpandedStepId(expandedStepId === step.id ? null : step.id),
53
+ onComplete: () => {
54
+ onStepComplete?.(step.id);
55
+ const nextStep = track.steps[index + 1];
56
+ if (nextStep && !progress.completedStepIds.includes(nextStep.id)) setExpandedStepId(nextStep.id);
57
+ }
58
+ }, step.id);
59
+ })
60
+ }),
61
+ track.completionRewards && percentComplete < 100 && /* @__PURE__ */ jsx("div", {
62
+ className: "rounded-lg border border-blue-500/30 bg-blue-500/5 p-4",
63
+ children: /* @__PURE__ */ jsxs("p", {
64
+ className: "text-sm",
65
+ children: [
66
+ "🎁 Complete all steps to unlock:",
67
+ track.completionRewards.xpBonus && /* @__PURE__ */ jsxs("span", {
68
+ className: "ml-2 font-semibold text-blue-500",
69
+ children: [
70
+ "+",
71
+ track.completionRewards.xpBonus,
72
+ " XP bonus"
73
+ ]
74
+ }),
75
+ track.completionRewards.badgeKey && /* @__PURE__ */ jsxs("span", {
76
+ className: "ml-2 font-semibold text-amber-500",
77
+ children: [
78
+ "+ \"",
79
+ track.completionRewards.badgeKey,
80
+ "\" badge"
81
+ ]
82
+ })
83
+ ]
84
+ })
85
+ })
86
+ ]
87
+ });
88
+ }
89
+
90
+ //#endregion
91
+ export { Steps };
@@ -0,0 +1,10 @@
1
+ import * as react_jsx_runtime3 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_runtime3.JSX.Element;
9
+ //#endregion
10
+ export { Timeline };
@@ -0,0 +1,97 @@
1
+ 'use client';
2
+
3
+ import { Card, CardContent, CardHeader, CardTitle } from "../libs/ui-kit-web/dist/ui/card.js";
4
+ import { JourneyMap } from "../components/JourneyMap.js";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
6
+
7
+ //#region src/views/Timeline.tsx
8
+ function Timeline({ track, progress }) {
9
+ const currentStepId = track.steps.find((s) => !progress.completedStepIds.includes(s.id))?.id ?? null;
10
+ return /* @__PURE__ */ jsxs("div", {
11
+ className: "space-y-6",
12
+ children: [
13
+ /* @__PURE__ */ jsxs("div", {
14
+ className: "text-center",
15
+ children: [/* @__PURE__ */ jsx("h2", {
16
+ className: "text-xl font-bold",
17
+ children: "Your Learning Journey"
18
+ }), /* @__PURE__ */ jsx("p", {
19
+ className: "text-muted-foreground",
20
+ children: "Follow the path through each surface and feature"
21
+ })]
22
+ }),
23
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
24
+ className: "flex items-center gap-2",
25
+ children: [/* @__PURE__ */ jsx("span", { children: "🗺️" }), /* @__PURE__ */ jsx("span", { children: "Journey Map" })]
26
+ }) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(JourneyMap, {
27
+ steps: track.steps,
28
+ completedStepIds: progress.completedStepIds,
29
+ currentStepId
30
+ }) })] }),
31
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
32
+ className: "flex items-center gap-2",
33
+ children: [/* @__PURE__ */ jsx("span", { children: "📍" }), /* @__PURE__ */ jsx("span", { children: "Step by Step" })]
34
+ }) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", {
35
+ className: "relative",
36
+ children: [/* @__PURE__ */ jsx("div", { className: "bg-border absolute top-0 left-4 h-full w-0.5" }), /* @__PURE__ */ jsx("div", {
37
+ className: "space-y-6",
38
+ children: track.steps.map((step, index) => {
39
+ const isCompleted = progress.completedStepIds.includes(step.id);
40
+ const isCurrent = step.id === currentStepId;
41
+ const surface = step.metadata?.surface ?? "general";
42
+ return /* @__PURE__ */ jsxs("div", {
43
+ className: "relative flex gap-4 pl-2",
44
+ children: [/* @__PURE__ */ jsx("div", {
45
+ className: `relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 transition-all ${isCompleted ? "border-green-500 bg-green-500 text-white" : isCurrent ? "border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20" : "border-border bg-background text-muted-foreground"}`,
46
+ children: isCompleted ? "✓" : index + 1
47
+ }), /* @__PURE__ */ jsx("div", {
48
+ className: "flex-1 pb-2",
49
+ children: /* @__PURE__ */ jsxs("div", {
50
+ className: "rounded-lg border p-4",
51
+ children: [/* @__PURE__ */ jsxs("div", {
52
+ className: "flex items-start justify-between gap-2",
53
+ children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
54
+ className: "flex items-center gap-2",
55
+ children: [/* @__PURE__ */ jsx("h4", {
56
+ className: `font-semibold ${isCompleted ? "text-green-500" : isCurrent ? "text-blue-500" : "text-foreground"}`,
57
+ children: step.title
58
+ }), /* @__PURE__ */ jsx("span", {
59
+ className: "bg-muted text-muted-foreground rounded px-2 py-0.5 text-xs",
60
+ children: surface
61
+ })]
62
+ }), /* @__PURE__ */ jsx("p", {
63
+ className: "text-muted-foreground mt-1 text-sm",
64
+ children: step.description
65
+ })] }), step.xpReward && /* @__PURE__ */ jsxs("span", {
66
+ 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"}`,
67
+ children: [
68
+ "+",
69
+ step.xpReward,
70
+ " XP"
71
+ ]
72
+ })]
73
+ }), /* @__PURE__ */ jsx("div", {
74
+ className: "mt-3 text-xs",
75
+ children: isCompleted ? /* @__PURE__ */ jsx("span", {
76
+ className: "text-green-500",
77
+ children: "✓ Completed"
78
+ }) : isCurrent ? /* @__PURE__ */ jsx("span", {
79
+ className: "text-blue-500",
80
+ children: "→ In Progress"
81
+ }) : /* @__PURE__ */ jsx("span", {
82
+ className: "text-muted-foreground",
83
+ children: "○ Not Started"
84
+ })
85
+ })]
86
+ })
87
+ })]
88
+ }, step.id);
89
+ })
90
+ })]
91
+ }) })] })
92
+ ]
93
+ });
94
+ }
95
+
96
+ //#endregion
97
+ export { Timeline };
@@ -0,0 +1,5 @@
1
+ import { Overview } from "./Overview.js";
2
+ import { Steps } from "./Steps.js";
3
+ import { Progress as ProgressView } from "./Progress.js";
4
+ import { Timeline } from "./Timeline.js";
5
+ export { Overview, ProgressView as Progress, Steps, Timeline };
@@ -0,0 +1,6 @@
1
+ import { Overview } from "./Overview.js";
2
+ import { Steps } from "./Steps.js";
3
+ import { Progress as ProgressView } from "./Progress.js";
4
+ import { Timeline } from "./Timeline.js";
5
+
6
+ export { Overview, ProgressView as Progress, Steps, Timeline };
package/package.json CHANGED
@@ -1,16 +1,25 @@
1
1
  {
2
2
  "name": "@lssm/example.learning-journey-ui-onboarding",
3
- "version": "0.0.0-canary-20251217073102",
3
+ "version": "0.0.0-canary-20251217083314",
4
4
  "description": "Developer onboarding UI with checklists and journey maps.",
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/CodeSnippet": "./dist/components/CodeSnippet.js",
12
+ "./components/JourneyMap": "./dist/components/JourneyMap.js",
13
+ "./components/StepChecklist": "./dist/components/StepChecklist.js",
14
+ "./docs": "./dist/docs/index.js",
15
+ "./docs/learning-journey-ui-onboarding.docblock": "./dist/docs/learning-journey-ui-onboarding.docblock.js",
16
+ "./example": "./dist/example.js",
17
+ "./OnboardingMiniApp": "./dist/OnboardingMiniApp.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,20 +36,20 @@
27
36
  "test": "bun test"
28
37
  },
29
38
  "dependencies": {
30
- "@lssm/lib.ui-kit-core": "0.0.0-canary-20251217073102",
31
- "@lssm/lib.schema": "0.0.0-canary-20251217073102",
32
- "@lssm/lib.contracts": "0.0.0-canary-20251217073102",
33
- "@lssm/example.learning-journey-ui-shared": "0.0.0-canary-20251217073102",
34
- "@lssm/example.learning-journey-studio-onboarding": "0.0.0-canary-20251217073102",
35
- "@lssm/example.learning-journey-platform-tour": "0.0.0-canary-20251217073102",
36
- "@lssm/module.learning-journey": "0.0.0-canary-20251217073102",
37
- "@lssm/lib.design-system": "0.0.0-canary-20251217073102",
38
- "@lssm/lib.ui-kit-web": "0.0.0-canary-20251217073102",
39
+ "@lssm/lib.ui-kit-core": "0.0.0-canary-20251217083314",
40
+ "@lssm/lib.schema": "0.0.0-canary-20251217083314",
41
+ "@lssm/lib.contracts": "0.0.0-canary-20251217083314",
42
+ "@lssm/example.learning-journey-ui-shared": "0.0.0-canary-20251217083314",
43
+ "@lssm/example.learning-journey-studio-onboarding": "0.0.0-canary-20251217083314",
44
+ "@lssm/example.learning-journey-platform-tour": "0.0.0-canary-20251217083314",
45
+ "@lssm/module.learning-journey": "0.0.0-canary-20251217083314",
46
+ "@lssm/lib.design-system": "0.0.0-canary-20251217083314",
47
+ "@lssm/lib.ui-kit-web": "0.0.0-canary-20251217083314",
39
48
  "react": "^19.2.3"
40
49
  },
41
50
  "devDependencies": {
42
- "@lssm/tool.tsdown": "0.0.0-canary-20251217073102",
43
- "@lssm/tool.typescript": "0.0.0-canary-20251217073102",
51
+ "@lssm/tool.tsdown": "0.0.0-canary-20251217083314",
52
+ "@lssm/tool.typescript": "0.0.0-canary-20251217083314",
44
53
  "@types/react": "^19.1.6",
45
54
  "tsdown": "^0.17.4",
46
55
  "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,2 +0,0 @@
1
- import { n as CodeSnippet, r as StepChecklist, t as JourneyMap } from "../index-DOpWREi-.mjs";
2
- export { CodeSnippet, JourneyMap, StepChecklist };
@@ -1,4 +0,0 @@
1
- import { n as StepChecklist, t as JourneyMap } from "../JourneyMap-CZ47DksM.mjs";
2
- import { t as CodeSnippet } from "../components-OUN5S2z0.mjs";
3
-
4
- export { CodeSnippet, JourneyMap, StepChecklist };
@@ -1,33 +0,0 @@
1
- import { LearningViewProps } from "@lssm/example.learning-journey-ui-shared";
2
- import * as react_jsx_runtime0 from "react/jsx-runtime";
3
-
4
- //#region src/views/Overview.d.ts
5
- interface OnboardingOverviewProps extends LearningViewProps {
6
- onStart?: () => void;
7
- }
8
- declare function Overview({
9
- track,
10
- progress,
11
- onStart
12
- }: OnboardingOverviewProps): react_jsx_runtime0.JSX.Element;
13
- //#endregion
14
- //#region src/views/Steps.d.ts
15
- declare function Steps({
16
- track,
17
- progress,
18
- onStepComplete
19
- }: LearningViewProps): react_jsx_runtime0.JSX.Element;
20
- //#endregion
21
- //#region src/views/Progress.d.ts
22
- declare function ProgressView({
23
- track,
24
- progress
25
- }: LearningViewProps): react_jsx_runtime0.JSX.Element;
26
- //#endregion
27
- //#region src/views/Timeline.d.ts
28
- declare function Timeline({
29
- track,
30
- progress
31
- }: LearningViewProps): react_jsx_runtime0.JSX.Element;
32
- //#endregion
33
- export { Overview as i, ProgressView as n, Steps as r, Timeline as t };
@@ -1,48 +0,0 @@
1
- import * as react_jsx_runtime6 from "react/jsx-runtime";
2
- import { LearningJourneyStepSpec } from "@lssm/module.learning-journey/track-spec";
3
-
4
- //#region src/components/StepChecklist.d.ts
5
- interface StepChecklistProps {
6
- step: LearningJourneyStepSpec;
7
- stepNumber: number;
8
- isCompleted: boolean;
9
- isCurrent: boolean;
10
- isExpanded: boolean;
11
- onToggle: () => void;
12
- onComplete?: () => void;
13
- }
14
- declare function StepChecklist({
15
- step,
16
- stepNumber,
17
- isCompleted,
18
- isCurrent,
19
- isExpanded,
20
- onToggle,
21
- onComplete
22
- }: StepChecklistProps): react_jsx_runtime6.JSX.Element;
23
- //#endregion
24
- //#region src/components/CodeSnippet.d.ts
25
- interface CodeSnippetProps {
26
- code: string;
27
- language?: string;
28
- title?: string;
29
- }
30
- declare function CodeSnippet({
31
- code,
32
- language,
33
- title
34
- }: CodeSnippetProps): react_jsx_runtime6.JSX.Element;
35
- //#endregion
36
- //#region src/components/JourneyMap.d.ts
37
- interface JourneyMapProps {
38
- steps: LearningJourneyStepSpec[];
39
- completedStepIds: string[];
40
- currentStepId?: string | null;
41
- }
42
- declare function JourneyMap({
43
- steps,
44
- completedStepIds,
45
- currentStepId
46
- }: JourneyMapProps): react_jsx_runtime6.JSX.Element;
47
- //#endregion
48
- export { CodeSnippet as n, StepChecklist as r, JourneyMap as t };