@contractspec/example.learning-journey-ui-coaching 3.7.16 → 3.7.18

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 (48) hide show
  1. package/.turbo/turbo-build.log +49 -49
  2. package/CHANGELOG.md +34 -0
  3. package/dist/CoachingMiniApp.js +1 -1059
  4. package/dist/browser/CoachingMiniApp.js +1 -1059
  5. package/dist/browser/components/EngagementMeter.js +1 -143
  6. package/dist/browser/components/TipCard.js +1 -89
  7. package/dist/browser/components/TipFeed.js +1 -90
  8. package/dist/browser/components/index.js +1 -320
  9. package/dist/browser/docs/index.js +2 -16
  10. package/dist/browser/docs/learning-journey-ui-coaching.docblock.js +2 -16
  11. package/dist/browser/example.js +1 -32
  12. package/dist/browser/index.js +2 -1129
  13. package/dist/browser/learning-journey-ui-coaching.feature.js +1 -18
  14. package/dist/browser/views/Overview.js +1 -303
  15. package/dist/browser/views/Progress.js +1 -344
  16. package/dist/browser/views/Steps.js +1 -159
  17. package/dist/browser/views/Timeline.js +1 -266
  18. package/dist/browser/views/index.js +1 -980
  19. package/dist/components/EngagementMeter.js +1 -143
  20. package/dist/components/TipCard.js +1 -89
  21. package/dist/components/TipFeed.js +1 -90
  22. package/dist/components/index.js +1 -320
  23. package/dist/docs/index.js +2 -16
  24. package/dist/docs/learning-journey-ui-coaching.docblock.js +2 -16
  25. package/dist/example.js +1 -32
  26. package/dist/index.js +2 -1129
  27. package/dist/learning-journey-ui-coaching.feature.js +1 -18
  28. package/dist/node/CoachingMiniApp.js +1 -1059
  29. package/dist/node/components/EngagementMeter.js +1 -143
  30. package/dist/node/components/TipCard.js +1 -89
  31. package/dist/node/components/TipFeed.js +1 -90
  32. package/dist/node/components/index.js +1 -320
  33. package/dist/node/docs/index.js +2 -16
  34. package/dist/node/docs/learning-journey-ui-coaching.docblock.js +2 -16
  35. package/dist/node/example.js +1 -32
  36. package/dist/node/index.js +2 -1129
  37. package/dist/node/learning-journey-ui-coaching.feature.js +1 -18
  38. package/dist/node/views/Overview.js +1 -303
  39. package/dist/node/views/Progress.js +1 -344
  40. package/dist/node/views/Steps.js +1 -159
  41. package/dist/node/views/Timeline.js +1 -266
  42. package/dist/node/views/index.js +1 -980
  43. package/dist/views/Overview.js +1 -303
  44. package/dist/views/Progress.js +1 -344
  45. package/dist/views/Steps.js +1 -159
  46. package/dist/views/Timeline.js +1 -266
  47. package/dist/views/index.js +1 -980
  48. package/package.json +12 -12
@@ -1,344 +1 @@
1
- // src/components/EngagementMeter.tsx
2
- import { jsxDEV } from "react/jsx-dev-runtime";
3
- "use client";
4
- function EngagementMeter({
5
- acknowledged,
6
- actioned,
7
- pending,
8
- streak = 0
9
- }) {
10
- const total = acknowledged + actioned + pending;
11
- const actionedPercent = total > 0 ? actioned / total * 100 : 0;
12
- const acknowledgedPercent = total > 0 ? acknowledged / total * 100 : 0;
13
- return /* @__PURE__ */ jsxDEV("div", {
14
- className: "space-y-4",
15
- children: [
16
- /* @__PURE__ */ jsxDEV("div", {
17
- className: "flex items-center justify-center",
18
- children: /* @__PURE__ */ jsxDEV("div", {
19
- className: "relative h-32 w-32",
20
- children: [
21
- /* @__PURE__ */ jsxDEV("svg", {
22
- className: "h-full w-full -rotate-90",
23
- viewBox: "0 0 100 100",
24
- children: [
25
- /* @__PURE__ */ jsxDEV("circle", {
26
- cx: "50",
27
- cy: "50",
28
- r: "40",
29
- fill: "none",
30
- strokeWidth: "12",
31
- className: "stroke-muted"
32
- }, undefined, false, undefined, this),
33
- /* @__PURE__ */ jsxDEV("circle", {
34
- cx: "50",
35
- cy: "50",
36
- r: "40",
37
- fill: "none",
38
- strokeWidth: "12",
39
- strokeLinecap: "round",
40
- strokeDasharray: `${actionedPercent * 2.51} 251`,
41
- className: "stroke-green-500 transition-all duration-500"
42
- }, undefined, false, undefined, this),
43
- /* @__PURE__ */ jsxDEV("circle", {
44
- cx: "50",
45
- cy: "50",
46
- r: "40",
47
- fill: "none",
48
- strokeWidth: "12",
49
- strokeLinecap: "round",
50
- strokeDasharray: `${acknowledgedPercent * 2.51} 251`,
51
- strokeDashoffset: `${-actionedPercent * 2.51}`,
52
- className: "stroke-amber-500 transition-all duration-500"
53
- }, undefined, false, undefined, this)
54
- ]
55
- }, undefined, true, undefined, this),
56
- /* @__PURE__ */ jsxDEV("div", {
57
- className: "absolute inset-0 flex flex-col items-center justify-center",
58
- children: [
59
- /* @__PURE__ */ jsxDEV("span", {
60
- className: "font-bold text-2xl",
61
- children: total
62
- }, undefined, false, undefined, this),
63
- /* @__PURE__ */ jsxDEV("span", {
64
- className: "text-muted-foreground text-xs",
65
- children: "tips"
66
- }, undefined, false, undefined, this)
67
- ]
68
- }, undefined, true, undefined, this)
69
- ]
70
- }, undefined, true, undefined, this)
71
- }, undefined, false, undefined, this),
72
- /* @__PURE__ */ jsxDEV("div", {
73
- className: "flex justify-center gap-4 text-sm",
74
- children: [
75
- /* @__PURE__ */ jsxDEV("div", {
76
- className: "flex items-center gap-1.5",
77
- children: [
78
- /* @__PURE__ */ jsxDEV("div", {
79
- className: "h-3 w-3 rounded-full bg-green-500"
80
- }, undefined, false, undefined, this),
81
- /* @__PURE__ */ jsxDEV("span", {
82
- children: [
83
- "Actioned (",
84
- actioned,
85
- ")"
86
- ]
87
- }, undefined, true, undefined, this)
88
- ]
89
- }, undefined, true, undefined, this),
90
- /* @__PURE__ */ jsxDEV("div", {
91
- className: "flex items-center gap-1.5",
92
- children: [
93
- /* @__PURE__ */ jsxDEV("div", {
94
- className: "h-3 w-3 rounded-full bg-amber-500"
95
- }, undefined, false, undefined, this),
96
- /* @__PURE__ */ jsxDEV("span", {
97
- children: [
98
- "Acknowledged (",
99
- acknowledged,
100
- ")"
101
- ]
102
- }, undefined, true, undefined, this)
103
- ]
104
- }, undefined, true, undefined, this),
105
- /* @__PURE__ */ jsxDEV("div", {
106
- className: "flex items-center gap-1.5",
107
- children: [
108
- /* @__PURE__ */ jsxDEV("div", {
109
- className: "h-3 w-3 rounded-full bg-muted"
110
- }, undefined, false, undefined, this),
111
- /* @__PURE__ */ jsxDEV("span", {
112
- children: [
113
- "Pending (",
114
- pending,
115
- ")"
116
- ]
117
- }, undefined, true, undefined, this)
118
- ]
119
- }, undefined, true, undefined, this)
120
- ]
121
- }, undefined, true, undefined, this),
122
- streak > 0 && /* @__PURE__ */ jsxDEV("div", {
123
- className: "flex items-center justify-center gap-2 rounded-lg bg-orange-500/10 px-4 py-2",
124
- children: [
125
- /* @__PURE__ */ jsxDEV("span", {
126
- className: "text-xl",
127
- children: "\uD83D\uDD25"
128
- }, undefined, false, undefined, this),
129
- /* @__PURE__ */ jsxDEV("span", {
130
- className: "font-semibold text-orange-500",
131
- children: [
132
- streak,
133
- " day engagement streak!"
134
- ]
135
- }, undefined, true, undefined, this)
136
- ]
137
- }, undefined, true, undefined, this)
138
- ]
139
- }, undefined, true, undefined, this);
140
- }
141
-
142
- // src/views/Progress.tsx
143
- import {
144
- BadgeDisplay,
145
- StreakCounter,
146
- XpBar
147
- } from "@contractspec/example.learning-journey-ui-shared";
148
- import {
149
- Card,
150
- CardContent,
151
- CardHeader,
152
- CardTitle
153
- } from "@contractspec/lib.ui-kit-web/ui/card";
154
- import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
155
- "use client";
156
- function ProgressView({ track, progress }) {
157
- const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0);
158
- const completedSteps = progress.completedStepIds.length;
159
- const totalSteps = track.steps.length;
160
- const pendingSteps = totalSteps - completedSteps;
161
- const actioned = Math.floor(completedSteps * 0.7);
162
- const acknowledged = completedSteps - actioned;
163
- return /* @__PURE__ */ jsxDEV2("div", {
164
- className: "space-y-6",
165
- children: [
166
- /* @__PURE__ */ jsxDEV2(Card, {
167
- children: [
168
- /* @__PURE__ */ jsxDEV2(CardHeader, {
169
- children: /* @__PURE__ */ jsxDEV2(CardTitle, {
170
- className: "flex items-center gap-2",
171
- children: [
172
- /* @__PURE__ */ jsxDEV2("span", {
173
- children: "\uD83D\uDCCA"
174
- }, undefined, false, undefined, this),
175
- /* @__PURE__ */ jsxDEV2("span", {
176
- children: "Engagement Overview"
177
- }, undefined, false, undefined, this)
178
- ]
179
- }, undefined, true, undefined, this)
180
- }, undefined, false, undefined, this),
181
- /* @__PURE__ */ jsxDEV2(CardContent, {
182
- children: /* @__PURE__ */ jsxDEV2(EngagementMeter, {
183
- actioned,
184
- acknowledged,
185
- pending: pendingSteps,
186
- streak: progress.streakDays
187
- }, undefined, false, undefined, this)
188
- }, undefined, false, undefined, this)
189
- ]
190
- }, undefined, true, undefined, this),
191
- /* @__PURE__ */ jsxDEV2("div", {
192
- className: "grid gap-4 md:grid-cols-2",
193
- children: [
194
- /* @__PURE__ */ jsxDEV2(Card, {
195
- children: [
196
- /* @__PURE__ */ jsxDEV2(CardHeader, {
197
- className: "pb-2",
198
- children: /* @__PURE__ */ jsxDEV2(CardTitle, {
199
- className: "font-medium text-muted-foreground text-sm",
200
- children: "XP Earned"
201
- }, undefined, false, undefined, this)
202
- }, undefined, false, undefined, this),
203
- /* @__PURE__ */ jsxDEV2(CardContent, {
204
- className: "space-y-3",
205
- children: [
206
- /* @__PURE__ */ jsxDEV2("div", {
207
- className: "flex items-baseline gap-2",
208
- children: [
209
- /* @__PURE__ */ jsxDEV2("span", {
210
- className: "font-bold text-3xl text-orange-500",
211
- children: progress.xpEarned
212
- }, undefined, false, undefined, this),
213
- /* @__PURE__ */ jsxDEV2("span", {
214
- className: "text-muted-foreground",
215
- children: [
216
- "/ ",
217
- totalXp,
218
- " XP"
219
- ]
220
- }, undefined, true, undefined, this)
221
- ]
222
- }, undefined, true, undefined, this),
223
- /* @__PURE__ */ jsxDEV2(XpBar, {
224
- current: progress.xpEarned,
225
- max: totalXp,
226
- showLabel: false,
227
- size: "lg"
228
- }, undefined, false, undefined, this)
229
- ]
230
- }, undefined, true, undefined, this)
231
- ]
232
- }, undefined, true, undefined, this),
233
- /* @__PURE__ */ jsxDEV2(Card, {
234
- children: [
235
- /* @__PURE__ */ jsxDEV2(CardHeader, {
236
- className: "pb-2",
237
- children: /* @__PURE__ */ jsxDEV2(CardTitle, {
238
- className: "font-medium text-muted-foreground text-sm",
239
- children: "Engagement Streak"
240
- }, undefined, false, undefined, this)
241
- }, undefined, false, undefined, this),
242
- /* @__PURE__ */ jsxDEV2(CardContent, {
243
- children: /* @__PURE__ */ jsxDEV2("div", {
244
- className: "flex items-center gap-4",
245
- children: [
246
- /* @__PURE__ */ jsxDEV2(StreakCounter, {
247
- days: progress.streakDays,
248
- size: "lg"
249
- }, undefined, false, undefined, this),
250
- /* @__PURE__ */ jsxDEV2("div", {
251
- className: "text-muted-foreground text-sm",
252
- children: progress.streakDays > 0 ? "Keep going!" : "Start your streak today!"
253
- }, undefined, false, undefined, this)
254
- ]
255
- }, undefined, true, undefined, this)
256
- }, undefined, false, undefined, this)
257
- ]
258
- }, undefined, true, undefined, this)
259
- ]
260
- }, undefined, true, undefined, this),
261
- /* @__PURE__ */ jsxDEV2(Card, {
262
- children: [
263
- /* @__PURE__ */ jsxDEV2(CardHeader, {
264
- children: /* @__PURE__ */ jsxDEV2(CardTitle, {
265
- className: "flex items-center gap-2",
266
- children: [
267
- /* @__PURE__ */ jsxDEV2("span", {
268
- children: "\uD83C\uDFC5"
269
- }, undefined, false, undefined, this),
270
- /* @__PURE__ */ jsxDEV2("span", {
271
- children: "Achievements"
272
- }, undefined, false, undefined, this)
273
- ]
274
- }, undefined, true, undefined, this)
275
- }, undefined, false, undefined, this),
276
- /* @__PURE__ */ jsxDEV2(CardContent, {
277
- children: [
278
- /* @__PURE__ */ jsxDEV2(BadgeDisplay, {
279
- badges: progress.badges,
280
- size: "lg",
281
- maxVisible: 10
282
- }, undefined, false, undefined, this),
283
- progress.badges.length === 0 && /* @__PURE__ */ jsxDEV2("p", {
284
- className: "text-muted-foreground text-sm",
285
- children: "Action tips to unlock achievements!"
286
- }, undefined, false, undefined, this)
287
- ]
288
- }, undefined, true, undefined, this)
289
- ]
290
- }, undefined, true, undefined, this),
291
- /* @__PURE__ */ jsxDEV2(Card, {
292
- children: [
293
- /* @__PURE__ */ jsxDEV2(CardHeader, {
294
- children: /* @__PURE__ */ jsxDEV2(CardTitle, {
295
- className: "flex items-center gap-2",
296
- children: [
297
- /* @__PURE__ */ jsxDEV2("span", {
298
- children: "\uD83D\uDCA1"
299
- }, undefined, false, undefined, this),
300
- /* @__PURE__ */ jsxDEV2("span", {
301
- children: "Tip Status"
302
- }, undefined, false, undefined, this)
303
- ]
304
- }, undefined, true, undefined, this)
305
- }, undefined, false, undefined, this),
306
- /* @__PURE__ */ jsxDEV2(CardContent, {
307
- children: /* @__PURE__ */ jsxDEV2("div", {
308
- className: "space-y-3",
309
- children: track.steps.map((step) => {
310
- const isCompleted = progress.completedStepIds.includes(step.id);
311
- return /* @__PURE__ */ jsxDEV2("div", {
312
- className: "flex items-center justify-between rounded-lg border p-3",
313
- children: [
314
- /* @__PURE__ */ jsxDEV2("div", {
315
- className: "flex items-center gap-3",
316
- children: [
317
- /* @__PURE__ */ jsxDEV2("span", {
318
- className: isCompleted ? "text-green-500" : "text-amber-500",
319
- children: isCompleted ? "✓" : "○"
320
- }, undefined, false, undefined, this),
321
- /* @__PURE__ */ jsxDEV2("span", {
322
- className: isCompleted ? "text-muted-foreground" : "text-foreground",
323
- children: step.title
324
- }, undefined, false, undefined, this)
325
- ]
326
- }, undefined, true, undefined, this),
327
- /* @__PURE__ */ jsxDEV2("span", {
328
- className: `text-sm ${isCompleted ? "text-green-500" : "text-muted-foreground"}`,
329
- children: isCompleted ? "Actioned" : "Pending"
330
- }, undefined, false, undefined, this)
331
- ]
332
- }, step.id, true, undefined, this);
333
- })
334
- }, undefined, false, undefined, this)
335
- }, undefined, false, undefined, this)
336
- ]
337
- }, undefined, true, undefined, this)
338
- ]
339
- }, undefined, true, undefined, this);
340
- }
341
- export {
342
- ProgressView,
343
- ProgressView as Progress
344
- };
1
+ import{jsx as F,jsxs as z}from"react/jsx-runtime";function _({acknowledged:G,actioned:v,pending:N,streak:J=0}){let K=G+v+N,Y=K>0?v/K*100:0,Z=K>0?G/K*100:0;return z("div",{className:"space-y-4",children:[F("div",{className:"flex items-center justify-center",children:z("div",{className:"relative h-32 w-32",children:[z("svg",{className:"h-full w-full -rotate-90",viewBox:"0 0 100 100",children:[F("circle",{cx:"50",cy:"50",r:"40",fill:"none",strokeWidth:"12",className:"stroke-muted"}),F("circle",{cx:"50",cy:"50",r:"40",fill:"none",strokeWidth:"12",strokeLinecap:"round",strokeDasharray:`${Y*2.51} 251`,className:"stroke-green-500 transition-all duration-500"}),F("circle",{cx:"50",cy:"50",r:"40",fill:"none",strokeWidth:"12",strokeLinecap:"round",strokeDasharray:`${Z*2.51} 251`,strokeDashoffset:`${-Y*2.51}`,className:"stroke-amber-500 transition-all duration-500"})]}),z("div",{className:"absolute inset-0 flex flex-col items-center justify-center",children:[F("span",{className:"font-bold text-2xl",children:K}),F("span",{className:"text-muted-foreground text-xs",children:"tips"})]})]})}),z("div",{className:"flex justify-center gap-4 text-sm",children:[z("div",{className:"flex items-center gap-1.5",children:[F("div",{className:"h-3 w-3 rounded-full bg-green-500"}),z("span",{children:["Actioned (",v,")"]})]}),z("div",{className:"flex items-center gap-1.5",children:[F("div",{className:"h-3 w-3 rounded-full bg-amber-500"}),z("span",{children:["Acknowledged (",G,")"]})]}),z("div",{className:"flex items-center gap-1.5",children:[F("div",{className:"h-3 w-3 rounded-full bg-muted"}),z("span",{children:["Pending (",N,")"]})]})]}),J>0&&z("div",{className:"flex items-center justify-center gap-2 rounded-lg bg-orange-500/10 px-4 py-2",children:[F("span",{className:"text-xl",children:"\uD83D\uDD25"}),z("span",{className:"font-semibold text-orange-500",children:[J," day engagement streak!"]})]})]})}import{BadgeDisplay as A,StreakCounter as D,XpBar as L}from"@contractspec/example.learning-journey-ui-shared";import{Card as Q,CardContent as R,CardHeader as U,CardTitle as W}from"@contractspec/lib.ui-kit-web/ui/card";import{jsx as h,jsxs as q}from"react/jsx-runtime";function M({track:G,progress:v}){let N=G.totalXp??G.steps.reduce((O,I)=>O+(I.xpReward??0),0),J=v.completedStepIds.length,Y=G.steps.length-J,Z=Math.floor(J*0.7),$=J-Z;return q("div",{className:"space-y-6",children:[q(Q,{children:[h(U,{children:q(W,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCCA"}),h("span",{children:"Engagement Overview"})]})}),h(R,{children:h(_,{actioned:Z,acknowledged:$,pending:Y,streak:v.streakDays})})]}),q("div",{className:"grid gap-4 md:grid-cols-2",children:[q(Q,{children:[h(U,{className:"pb-2",children:h(W,{className:"font-medium text-muted-foreground text-sm",children:"XP Earned"})}),q(R,{className:"space-y-3",children:[q("div",{className:"flex items-baseline gap-2",children:[h("span",{className:"font-bold text-3xl text-orange-500",children:v.xpEarned}),q("span",{className:"text-muted-foreground",children:["/ ",N," XP"]})]}),h(L,{current:v.xpEarned,max:N,showLabel:!1,size:"lg"})]})]}),q(Q,{children:[h(U,{className:"pb-2",children:h(W,{className:"font-medium text-muted-foreground text-sm",children:"Engagement Streak"})}),h(R,{children:q("div",{className:"flex items-center gap-4",children:[h(D,{days:v.streakDays,size:"lg"}),h("div",{className:"text-muted-foreground text-sm",children:v.streakDays>0?"Keep going!":"Start your streak today!"})]})})]})]}),q(Q,{children:[h(U,{children:q(W,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83C\uDFC5"}),h("span",{children:"Achievements"})]})}),q(R,{children:[h(A,{badges:v.badges,size:"lg",maxVisible:10}),v.badges.length===0&&h("p",{className:"text-muted-foreground text-sm",children:"Action tips to unlock achievements!"})]})]}),q(Q,{children:[h(U,{children:q(W,{className:"flex items-center gap-2",children:[h("span",{children:"\uD83D\uDCA1"}),h("span",{children:"Tip Status"})]})}),h(R,{children:h("div",{className:"space-y-3",children:G.steps.map((O)=>{let I=v.completedStepIds.includes(O.id);return q("div",{className:"flex items-center justify-between rounded-lg border p-3",children:[q("div",{className:"flex items-center gap-3",children:[h("span",{className:I?"text-green-500":"text-amber-500",children:I?"✓":"○"}),h("span",{className:I?"text-muted-foreground":"text-foreground",children:O.title})]}),h("span",{className:`text-sm ${I?"text-green-500":"text-muted-foreground"}`,children:I?"Actioned":"Pending"})]},O.id)})})})]})]})}export{M as ProgressView,M as Progress};
@@ -1,159 +1 @@
1
- // src/components/TipCard.tsx
2
- import { Button } from "@contractspec/lib.design-system";
3
- import { Card, CardContent } from "@contractspec/lib.ui-kit-web/ui/card";
4
- import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
5
- import { jsxDEV } from "react/jsx-dev-runtime";
6
- "use client";
7
- var TIP_ICONS = {
8
- cash_buffer_too_high: "\uD83D\uDCB0",
9
- no_savings_goal: "\uD83C\uDFAF",
10
- irregular_savings: "\uD83D\uDCC5",
11
- noise_late_evening: "\uD83D\uDD07",
12
- guest_frequency_high: "\uD83D\uDC65",
13
- shared_space_conflicts: "\uD83C\uDFE0",
14
- default: "\uD83D\uDCA1"
15
- };
16
- function TipCard({
17
- step,
18
- isCompleted,
19
- isCurrent,
20
- onComplete,
21
- onDismiss
22
- }) {
23
- const tipId = step.metadata?.tipId ?? "default";
24
- const icon = TIP_ICONS[tipId] ?? TIP_ICONS.default;
25
- return /* @__PURE__ */ jsxDEV(Card, {
26
- className: cn("transition-all", isCompleted && "opacity-60", isCurrent && "ring-2 ring-amber-500"),
27
- children: /* @__PURE__ */ jsxDEV(CardContent, {
28
- className: "p-4",
29
- children: /* @__PURE__ */ jsxDEV("div", {
30
- className: "flex gap-4",
31
- children: [
32
- /* @__PURE__ */ jsxDEV("div", {
33
- className: cn("flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-2xl", isCompleted ? "bg-green-500/10" : isCurrent ? "bg-amber-500/10" : "bg-muted"),
34
- children: isCompleted ? "✓" : icon
35
- }, undefined, false, undefined, this),
36
- /* @__PURE__ */ jsxDEV("div", {
37
- className: "min-w-0 flex-1",
38
- children: [
39
- /* @__PURE__ */ jsxDEV("div", {
40
- className: "flex items-start justify-between gap-2",
41
- children: [
42
- /* @__PURE__ */ jsxDEV("h4", {
43
- className: "font-semibold",
44
- children: step.title
45
- }, undefined, false, undefined, this),
46
- step.xpReward && /* @__PURE__ */ jsxDEV("span", {
47
- className: cn("shrink-0 rounded-full px-2 py-0.5 font-semibold text-xs", isCompleted ? "bg-green-500/10 text-green-500" : "bg-amber-500/10 text-amber-500"),
48
- children: [
49
- "+",
50
- step.xpReward,
51
- " XP"
52
- ]
53
- }, undefined, true, undefined, this)
54
- ]
55
- }, undefined, true, undefined, this),
56
- /* @__PURE__ */ jsxDEV("p", {
57
- className: "mt-1 text-muted-foreground text-sm",
58
- children: step.description
59
- }, undefined, false, undefined, this),
60
- !isCompleted && /* @__PURE__ */ jsxDEV("div", {
61
- className: "mt-3 flex flex-wrap gap-2",
62
- children: [
63
- /* @__PURE__ */ jsxDEV(Button, {
64
- size: "sm",
65
- onClick: onComplete,
66
- children: "Take Action"
67
- }, undefined, false, undefined, this),
68
- /* @__PURE__ */ jsxDEV(Button, {
69
- variant: "outline",
70
- size: "sm",
71
- onClick: onDismiss,
72
- children: "Dismiss"
73
- }, undefined, false, undefined, this)
74
- ]
75
- }, undefined, true, undefined, this),
76
- isCompleted && /* @__PURE__ */ jsxDEV("p", {
77
- className: "mt-2 text-green-500 text-sm",
78
- children: "✓ Tip acknowledged"
79
- }, undefined, false, undefined, this)
80
- ]
81
- }, undefined, true, undefined, this)
82
- ]
83
- }, undefined, true, undefined, this)
84
- }, undefined, false, undefined, this)
85
- }, undefined, false, undefined, this);
86
- }
87
-
88
- // src/views/Steps.tsx
89
- import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
90
- "use client";
91
- function Steps({ track, progress, onStepComplete }) {
92
- const completedSteps = progress.completedStepIds.length;
93
- const totalSteps = track.steps.length;
94
- const sortedSteps = [...track.steps].sort((a, b) => {
95
- const aCompleted = progress.completedStepIds.includes(a.id);
96
- const bCompleted = progress.completedStepIds.includes(b.id);
97
- if (aCompleted === bCompleted)
98
- return 0;
99
- return aCompleted ? 1 : -1;
100
- });
101
- const currentStepId = track.steps.find((s) => !progress.completedStepIds.includes(s.id))?.id;
102
- return /* @__PURE__ */ jsxDEV2("div", {
103
- className: "space-y-6",
104
- children: [
105
- /* @__PURE__ */ jsxDEV2("div", {
106
- className: "text-center",
107
- children: [
108
- /* @__PURE__ */ jsxDEV2("h2", {
109
- className: "font-bold text-xl",
110
- children: "Coaching Tips"
111
- }, undefined, false, undefined, this),
112
- /* @__PURE__ */ jsxDEV2("p", {
113
- className: "text-muted-foreground",
114
- children: "Review and take action on personalized tips"
115
- }, undefined, false, undefined, this),
116
- /* @__PURE__ */ jsxDEV2("p", {
117
- className: "mt-2 text-muted-foreground text-sm",
118
- children: [
119
- completedSteps,
120
- " of ",
121
- totalSteps,
122
- " tips actioned"
123
- ]
124
- }, undefined, true, undefined, this)
125
- ]
126
- }, undefined, true, undefined, this),
127
- /* @__PURE__ */ jsxDEV2("div", {
128
- className: "space-y-3",
129
- children: sortedSteps.map((step) => {
130
- const isCompleted = progress.completedStepIds.includes(step.id);
131
- const isCurrent = step.id === currentStepId;
132
- return /* @__PURE__ */ jsxDEV2(TipCard, {
133
- step,
134
- isCompleted,
135
- isCurrent,
136
- onComplete: () => onStepComplete?.(step.id),
137
- onDismiss: () => onStepComplete?.(step.id)
138
- }, step.id, false, undefined, this);
139
- })
140
- }, undefined, false, undefined, this),
141
- completedSteps === totalSteps && /* @__PURE__ */ jsxDEV2("div", {
142
- className: "text-center text-muted-foreground",
143
- children: [
144
- /* @__PURE__ */ jsxDEV2("span", {
145
- className: "text-2xl",
146
- children: "✨"
147
- }, undefined, false, undefined, this),
148
- /* @__PURE__ */ jsxDEV2("p", {
149
- className: "mt-2",
150
- children: "All tips have been addressed!"
151
- }, undefined, false, undefined, this)
152
- ]
153
- }, undefined, true, undefined, this)
154
- ]
155
- }, undefined, true, undefined, this);
156
- }
157
- export {
158
- Steps
159
- };
1
+ import{Button as W}from"@contractspec/lib.design-system";import{Card as $,CardContent as f}from"@contractspec/lib.ui-kit-web/ui/card";import{cn as V}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as z,jsxs as G}from"react/jsx-runtime";var X={cash_buffer_too_high:"\uD83D\uDCB0",no_savings_goal:"\uD83C\uDFAF",irregular_savings:"\uD83D\uDCC5",noise_late_evening:"\uD83D\uDD07",guest_frequency_high:"\uD83D\uDC65",shared_space_conflicts:"\uD83C\uDFE0",default:"\uD83D\uDCA1"};function Y({step:y,isCompleted:q,isCurrent:F,onComplete:J,onDismiss:K}){let Q=y.metadata?.tipId??"default",R=X[Q]??X.default;return z($,{className:V("transition-all",q&&"opacity-60",F&&"ring-2 ring-amber-500"),children:z(f,{className:"p-4",children:G("div",{className:"flex gap-4",children:[z("div",{className:V("flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-2xl",q?"bg-green-500/10":F?"bg-amber-500/10":"bg-muted"),children:q?"✓":R}),G("div",{className:"min-w-0 flex-1",children:[G("div",{className:"flex items-start justify-between gap-2",children:[z("h4",{className:"font-semibold",children:y.title}),y.xpReward&&G("span",{className:V("shrink-0 rounded-full px-2 py-0.5 font-semibold text-xs",q?"bg-green-500/10 text-green-500":"bg-amber-500/10 text-amber-500"),children:["+",y.xpReward," XP"]})]}),z("p",{className:"mt-1 text-muted-foreground text-sm",children:y.description}),!q&&G("div",{className:"mt-3 flex flex-wrap gap-2",children:[z(W,{size:"sm",onClick:J,children:"Take Action"}),z(W,{variant:"outline",size:"sm",onClick:K,children:"Dismiss"})]}),q&&z("p",{className:"mt-2 text-green-500 text-sm",children:"✓ Tip acknowledged"})]})]})})})}import{jsx as E,jsxs as M}from"react/jsx-runtime";function N({track:y,progress:q,onStepComplete:F}){let J=q.completedStepIds.length,K=y.steps.length,Q=[...y.steps].sort((v,U)=>{let L=q.completedStepIds.includes(v.id),Z=q.completedStepIds.includes(U.id);if(L===Z)return 0;return L?1:-1}),R=y.steps.find((v)=>!q.completedStepIds.includes(v.id))?.id;return M("div",{className:"space-y-6",children:[M("div",{className:"text-center",children:[E("h2",{className:"font-bold text-xl",children:"Coaching Tips"}),E("p",{className:"text-muted-foreground",children:"Review and take action on personalized tips"}),M("p",{className:"mt-2 text-muted-foreground text-sm",children:[J," of ",K," tips actioned"]})]}),E("div",{className:"space-y-3",children:Q.map((v)=>{let U=q.completedStepIds.includes(v.id),L=v.id===R;return E(Y,{step:v,isCompleted:U,isCurrent:L,onComplete:()=>F?.(v.id),onDismiss:()=>F?.(v.id)},v.id)})}),J===K&&M("div",{className:"text-center text-muted-foreground",children:[E("span",{className:"text-2xl",children:"✨"}),E("p",{className:"mt-2",children:"All tips have been addressed!"})]})]})}export{N as Steps};