@contractspec/example.learning-journey-ui-coaching 0.0.0-canary-20260113170453

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 (71) hide show
  1. package/.turbo/turbo-build$colon$bundle.log +57 -0
  2. package/.turbo/turbo-build.log +58 -0
  3. package/CHANGELOG.md +466 -0
  4. package/LICENSE +21 -0
  5. package/README.md +32 -0
  6. package/dist/CoachingMiniApp.d.ts +17 -0
  7. package/dist/CoachingMiniApp.d.ts.map +1 -0
  8. package/dist/CoachingMiniApp.js +63 -0
  9. package/dist/CoachingMiniApp.js.map +1 -0
  10. package/dist/components/EngagementMeter.d.ts +18 -0
  11. package/dist/components/EngagementMeter.d.ts.map +1 -0
  12. package/dist/components/EngagementMeter.js +108 -0
  13. package/dist/components/EngagementMeter.js.map +1 -0
  14. package/dist/components/TipCard.d.ts +21 -0
  15. package/dist/components/TipCard.d.ts.map +1 -0
  16. package/dist/components/TipCard.js +76 -0
  17. package/dist/components/TipCard.js.map +1 -0
  18. package/dist/components/TipFeed.d.ts +18 -0
  19. package/dist/components/TipFeed.d.ts.map +1 -0
  20. package/dist/components/TipFeed.js +66 -0
  21. package/dist/components/TipFeed.js.map +1 -0
  22. package/dist/components/index.d.ts +4 -0
  23. package/dist/components/index.js +5 -0
  24. package/dist/docs/index.d.ts +1 -0
  25. package/dist/docs/index.js +1 -0
  26. package/dist/docs/learning-journey-ui-coaching.docblock.d.ts +1 -0
  27. package/dist/docs/learning-journey-ui-coaching.docblock.js +20 -0
  28. package/dist/docs/learning-journey-ui-coaching.docblock.js.map +1 -0
  29. package/dist/example.d.ts +7 -0
  30. package/dist/example.d.ts.map +1 -0
  31. package/dist/example.js +42 -0
  32. package/dist/example.js.map +1 -0
  33. package/dist/index.d.ts +12 -0
  34. package/dist/index.js +14 -0
  35. package/dist/views/Overview.d.ts +16 -0
  36. package/dist/views/Overview.d.ts.map +1 -0
  37. package/dist/views/Overview.js +151 -0
  38. package/dist/views/Overview.js.map +1 -0
  39. package/dist/views/Progress.d.ts +11 -0
  40. package/dist/views/Progress.d.ts.map +1 -0
  41. package/dist/views/Progress.js +115 -0
  42. package/dist/views/Progress.js.map +1 -0
  43. package/dist/views/Steps.d.ts +12 -0
  44. package/dist/views/Steps.d.ts.map +1 -0
  45. package/dist/views/Steps.js +69 -0
  46. package/dist/views/Steps.js.map +1 -0
  47. package/dist/views/Timeline.d.ts +11 -0
  48. package/dist/views/Timeline.d.ts.map +1 -0
  49. package/dist/views/Timeline.js +113 -0
  50. package/dist/views/Timeline.js.map +1 -0
  51. package/dist/views/index.d.ts +5 -0
  52. package/dist/views/index.js +6 -0
  53. package/example.ts +1 -0
  54. package/package.json +76 -0
  55. package/src/CoachingMiniApp.tsx +93 -0
  56. package/src/components/EngagementMeter.tsx +93 -0
  57. package/src/components/TipCard.tsx +101 -0
  58. package/src/components/TipFeed.tsx +101 -0
  59. package/src/components/index.ts +3 -0
  60. package/src/docs/index.ts +1 -0
  61. package/src/docs/learning-journey-ui-coaching.docblock.ts +17 -0
  62. package/src/example.ts +31 -0
  63. package/src/index.ts +10 -0
  64. package/src/views/Overview.tsx +157 -0
  65. package/src/views/Progress.tsx +164 -0
  66. package/src/views/Steps.tsx +63 -0
  67. package/src/views/Timeline.tsx +114 -0
  68. package/src/views/index.ts +4 -0
  69. package/tsconfig.json +10 -0
  70. package/tsconfig.tsbuildinfo +1 -0
  71. package/tsdown.config.js +17 -0
@@ -0,0 +1,151 @@
1
+ 'use client';
2
+
3
+ import { TipCard } from "../components/TipCard.js";
4
+ import { Card, CardContent, CardHeader, CardTitle } from "@contractspec/lib.ui-kit-web/ui/card";
5
+ import { StreakCounter, XpBar } from "@contractspec/example.learning-journey-ui-shared";
6
+ import { Button } from "@contractspec/lib.design-system";
7
+ import { jsx, jsxs } from "react/jsx-runtime";
8
+
9
+ //#region src/views/Overview.tsx
10
+ function Overview({ track, progress, onStepComplete, onStart }) {
11
+ const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0);
12
+ const completedSteps = progress.completedStepIds.length;
13
+ const totalSteps = track.steps.length;
14
+ const pendingSteps = totalSteps - completedSteps;
15
+ const activeTips = track.steps.filter((s) => !progress.completedStepIds.includes(s.id)).slice(0, 3);
16
+ return /* @__PURE__ */ jsxs("div", {
17
+ className: "space-y-6",
18
+ children: [
19
+ /* @__PURE__ */ jsx(Card, {
20
+ className: "overflow-hidden bg-gradient-to-br from-amber-500/10 via-orange-500/10 to-red-500/10",
21
+ children: /* @__PURE__ */ jsx(CardContent, {
22
+ className: "p-6",
23
+ children: /* @__PURE__ */ jsxs("div", {
24
+ className: "flex flex-col items-center gap-4 text-center md:flex-row md:text-left",
25
+ children: [
26
+ /* @__PURE__ */ jsx("div", {
27
+ className: "flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 text-3xl shadow-lg",
28
+ children: "💡"
29
+ }),
30
+ /* @__PURE__ */ jsxs("div", {
31
+ className: "flex-1",
32
+ children: [/* @__PURE__ */ jsx("h1", {
33
+ className: "text-2xl font-bold",
34
+ children: track.name
35
+ }), /* @__PURE__ */ jsx("p", {
36
+ className: "text-muted-foreground mt-1",
37
+ children: track.description
38
+ })]
39
+ }),
40
+ /* @__PURE__ */ jsx("div", {
41
+ className: "flex items-center gap-4",
42
+ children: /* @__PURE__ */ jsx(StreakCounter, {
43
+ days: progress.streakDays,
44
+ size: "lg"
45
+ })
46
+ })
47
+ ]
48
+ })
49
+ })
50
+ }),
51
+ /* @__PURE__ */ jsxs("div", {
52
+ className: "grid gap-4 md:grid-cols-3",
53
+ children: [
54
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
55
+ className: "pb-2",
56
+ children: /* @__PURE__ */ jsx(CardTitle, {
57
+ className: "text-muted-foreground text-sm font-medium",
58
+ children: "Active Tips"
59
+ })
60
+ }), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx("div", {
61
+ className: "text-3xl font-bold text-amber-500",
62
+ children: pendingSteps
63
+ }), /* @__PURE__ */ jsx("p", {
64
+ className: "text-muted-foreground text-sm",
65
+ children: "tips for you today"
66
+ })] })] }),
67
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
68
+ className: "pb-2",
69
+ children: /* @__PURE__ */ jsx(CardTitle, {
70
+ className: "text-muted-foreground text-sm font-medium",
71
+ children: "Tips Actioned"
72
+ })
73
+ }), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx("div", {
74
+ className: "text-3xl font-bold text-green-500",
75
+ children: completedSteps
76
+ }), /* @__PURE__ */ jsxs("p", {
77
+ className: "text-muted-foreground text-sm",
78
+ children: [
79
+ "out of ",
80
+ totalSteps,
81
+ " total"
82
+ ]
83
+ })] })] }),
84
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
85
+ className: "pb-2",
86
+ children: /* @__PURE__ */ jsx(CardTitle, {
87
+ className: "text-muted-foreground text-sm font-medium",
88
+ children: "XP Earned"
89
+ })
90
+ }), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx("div", {
91
+ className: "text-3xl font-bold text-orange-500",
92
+ children: progress.xpEarned
93
+ }), /* @__PURE__ */ jsx(XpBar, {
94
+ current: progress.xpEarned,
95
+ max: totalXp,
96
+ showLabel: false,
97
+ size: "sm"
98
+ })] })] })
99
+ ]
100
+ }),
101
+ activeTips.length > 0 && /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(CardHeader, {
102
+ className: "flex flex-row items-center justify-between",
103
+ children: [/* @__PURE__ */ jsxs(CardTitle, {
104
+ className: "flex items-center gap-2",
105
+ children: [/* @__PURE__ */ jsx("span", { children: "💡" }), /* @__PURE__ */ jsx("span", { children: "Tips for You" })]
106
+ }), activeTips.length < pendingSteps && /* @__PURE__ */ jsxs(Button, {
107
+ variant: "outline",
108
+ size: "sm",
109
+ onClick: onStart,
110
+ children: [
111
+ "View All (",
112
+ pendingSteps,
113
+ ")"
114
+ ]
115
+ })]
116
+ }), /* @__PURE__ */ jsx(CardContent, {
117
+ className: "space-y-3",
118
+ children: activeTips.map((step) => /* @__PURE__ */ jsx(TipCard, {
119
+ step,
120
+ isCompleted: false,
121
+ isCurrent: step.id === activeTips[0]?.id,
122
+ onComplete: () => onStepComplete?.(step.id)
123
+ }, step.id))
124
+ })] }),
125
+ pendingSteps === 0 && /* @__PURE__ */ jsx(Card, {
126
+ className: "border-green-500/50 bg-green-500/5",
127
+ children: /* @__PURE__ */ jsxs(CardContent, {
128
+ className: "flex items-center gap-4 p-6",
129
+ children: [/* @__PURE__ */ jsx("div", {
130
+ className: "text-4xl",
131
+ children: "🎉"
132
+ }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
133
+ className: "text-lg font-semibold text-green-500",
134
+ children: "All Tips Actioned!"
135
+ }), /* @__PURE__ */ jsxs("p", {
136
+ className: "text-muted-foreground",
137
+ children: [
138
+ "Great job! You've addressed all ",
139
+ totalSteps,
140
+ " coaching tips."
141
+ ]
142
+ })] })]
143
+ })
144
+ })
145
+ ]
146
+ });
147
+ }
148
+
149
+ //#endregion
150
+ export { Overview };
151
+ //# sourceMappingURL=Overview.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Overview.js","names":[],"sources":["../../src/views/Overview.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@contractspec/lib.design-system';\nimport {\n Card,\n CardContent,\n CardHeader,\n CardTitle,\n} from '@contractspec/lib.ui-kit-web/ui/card';\nimport {\n XpBar,\n StreakCounter,\n} from '@contractspec/example.learning-journey-ui-shared';\nimport { TipCard } from '../components/TipCard';\nimport type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';\n\ninterface CoachingOverviewProps extends LearningViewProps {\n onStart?: () => void;\n}\n\nexport function Overview({\n track,\n progress,\n onStepComplete,\n onStart,\n}: CoachingOverviewProps) {\n const totalXp =\n track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0);\n\n const completedSteps = progress.completedStepIds.length;\n const totalSteps = track.steps.length;\n const pendingSteps = totalSteps - completedSteps;\n\n // Get active tips (incomplete ones)\n const activeTips = track.steps\n .filter((s) => !progress.completedStepIds.includes(s.id))\n .slice(0, 3);\n\n return (\n <div className=\"space-y-6\">\n {/* Header Card */}\n <Card className=\"overflow-hidden bg-gradient-to-br from-amber-500/10 via-orange-500/10 to-red-500/10\">\n <CardContent className=\"p-6\">\n <div className=\"flex flex-col items-center gap-4 text-center md:flex-row md:text-left\">\n <div className=\"flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 text-3xl shadow-lg\">\n 💡\n </div>\n <div className=\"flex-1\">\n <h1 className=\"text-2xl font-bold\">{track.name}</h1>\n <p className=\"text-muted-foreground mt-1\">{track.description}</p>\n </div>\n <div className=\"flex items-center gap-4\">\n <StreakCounter days={progress.streakDays} size=\"lg\" />\n </div>\n </div>\n </CardContent>\n </Card>\n\n {/* Quick Stats */}\n <div className=\"grid gap-4 md:grid-cols-3\">\n <Card>\n <CardHeader className=\"pb-2\">\n <CardTitle className=\"text-muted-foreground text-sm font-medium\">\n Active Tips\n </CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"text-3xl font-bold text-amber-500\">\n {pendingSteps}\n </div>\n <p className=\"text-muted-foreground text-sm\">tips for you today</p>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader className=\"pb-2\">\n <CardTitle className=\"text-muted-foreground text-sm font-medium\">\n Tips Actioned\n </CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"text-3xl font-bold text-green-500\">\n {completedSteps}\n </div>\n <p className=\"text-muted-foreground text-sm\">\n out of {totalSteps} total\n </p>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader className=\"pb-2\">\n <CardTitle className=\"text-muted-foreground text-sm font-medium\">\n XP Earned\n </CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"text-3xl font-bold text-orange-500\">\n {progress.xpEarned}\n </div>\n <XpBar\n current={progress.xpEarned}\n max={totalXp}\n showLabel={false}\n size=\"sm\"\n />\n </CardContent>\n </Card>\n </div>\n\n {/* Active Tips Preview */}\n {activeTips.length > 0 && (\n <Card>\n <CardHeader className=\"flex flex-row items-center justify-between\">\n <CardTitle className=\"flex items-center gap-2\">\n <span>💡</span>\n <span>Tips for You</span>\n </CardTitle>\n {activeTips.length < pendingSteps && (\n <Button variant=\"outline\" size=\"sm\" onClick={onStart}>\n View All ({pendingSteps})\n </Button>\n )}\n </CardHeader>\n <CardContent className=\"space-y-3\">\n {activeTips.map((step) => (\n <TipCard\n key={step.id}\n step={step}\n isCompleted={false}\n isCurrent={step.id === activeTips[0]?.id}\n onComplete={() => onStepComplete?.(step.id)}\n />\n ))}\n </CardContent>\n </Card>\n )}\n\n {/* All Complete */}\n {pendingSteps === 0 && (\n <Card className=\"border-green-500/50 bg-green-500/5\">\n <CardContent className=\"flex items-center gap-4 p-6\">\n <div className=\"text-4xl\">🎉</div>\n <div>\n <h3 className=\"text-lg font-semibold text-green-500\">\n All Tips Actioned!\n </h3>\n <p className=\"text-muted-foreground\">\n Great job! You've addressed all {totalSteps} coaching tips.\n </p>\n </div>\n </CardContent>\n </Card>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;AAoBA,SAAgB,SAAS,EACvB,OACA,UACA,gBACA,WACwB;CACxB,MAAM,UACJ,MAAM,WAAW,MAAM,MAAM,QAAQ,KAAK,MAAM,OAAO,EAAE,YAAY,IAAI,EAAE;CAE7E,MAAM,iBAAiB,SAAS,iBAAiB;CACjD,MAAM,aAAa,MAAM,MAAM;CAC/B,MAAM,eAAe,aAAa;CAGlC,MAAM,aAAa,MAAM,MACtB,QAAQ,MAAM,CAAC,SAAS,iBAAiB,SAAS,EAAE,GAAG,CAAC,CACxD,MAAM,GAAG,EAAE;AAEd,QACE,qBAAC;EAAI,WAAU;;GAEb,oBAAC;IAAK,WAAU;cACd,oBAAC;KAAY,WAAU;eACrB,qBAAC;MAAI,WAAU;;OACb,oBAAC;QAAI,WAAU;kBAA2H;SAEpI;OACN,qBAAC;QAAI,WAAU;mBACb,oBAAC;SAAG,WAAU;mBAAsB,MAAM;UAAU,EACpD,oBAAC;SAAE,WAAU;mBAA8B,MAAM;UAAgB;SAC7D;OACN,oBAAC;QAAI,WAAU;kBACb,oBAAC;SAAc,MAAM,SAAS;SAAY,MAAK;UAAO;SAClD;;OACF;MACM;KACT;GAGP,qBAAC;IAAI,WAAU;;KACb,qBAAC,mBACC,oBAAC;MAAW,WAAU;gBACpB,oBAAC;OAAU,WAAU;iBAA4C;QAErD;OACD,EACb,qBAAC,0BACC,oBAAC;MAAI,WAAU;gBACZ;OACG,EACN,oBAAC;MAAE,WAAU;gBAAgC;OAAsB,IACvD,IACT;KAEP,qBAAC,mBACC,oBAAC;MAAW,WAAU;gBACpB,oBAAC;OAAU,WAAU;iBAA4C;QAErD;OACD,EACb,qBAAC,0BACC,oBAAC;MAAI,WAAU;gBACZ;OACG,EACN,qBAAC;MAAE,WAAU;;OAAgC;OACnC;OAAW;;OACjB,IACQ,IACT;KAEP,qBAAC,mBACC,oBAAC;MAAW,WAAU;gBACpB,oBAAC;OAAU,WAAU;iBAA4C;QAErD;OACD,EACb,qBAAC,0BACC,oBAAC;MAAI,WAAU;gBACZ,SAAS;OACN,EACN,oBAAC;MACC,SAAS,SAAS;MAClB,KAAK;MACL,WAAW;MACX,MAAK;OACL,IACU,IACT;;KACH;GAGL,WAAW,SAAS,KACnB,qBAAC,mBACC,qBAAC;IAAW,WAAU;eACpB,qBAAC;KAAU,WAAU;gBACnB,oBAAC,oBAAK,OAAS,EACf,oBAAC,oBAAK,iBAAmB;MACf,EACX,WAAW,SAAS,gBACnB,qBAAC;KAAO,SAAQ;KAAU,MAAK;KAAK,SAAS;;MAAS;MACzC;MAAa;;MACjB;KAEA,EACb,oBAAC;IAAY,WAAU;cACpB,WAAW,KAAK,SACf,oBAAC;KAEO;KACN,aAAa;KACb,WAAW,KAAK,OAAO,WAAW,IAAI;KACtC,kBAAkB,iBAAiB,KAAK,GAAG;OAJtC,KAAK,GAKV,CACF;KACU,IACT;GAIR,iBAAiB,KAChB,oBAAC;IAAK,WAAU;cACd,qBAAC;KAAY,WAAU;gBACrB,oBAAC;MAAI,WAAU;gBAAW;OAAQ,EAClC,qBAAC,oBACC,oBAAC;MAAG,WAAU;gBAAuC;OAEhD,EACL,qBAAC;MAAE,WAAU;;OAAwB;OACF;OAAW;;OAC1C,IACA;MACM;KACT;;GAEL"}
@@ -0,0 +1,11 @@
1
+ import { LearningViewProps } from "@contractspec/example.learning-journey-ui-shared";
2
+ import * as react_jsx_runtime3 from "react/jsx-runtime";
3
+
4
+ //#region src/views/Progress.d.ts
5
+ declare function ProgressView({
6
+ track,
7
+ progress
8
+ }: LearningViewProps): react_jsx_runtime3.JSX.Element;
9
+ //#endregion
10
+ export { ProgressView as Progress, ProgressView };
11
+ //# sourceMappingURL=Progress.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Progress.d.ts","names":[],"sources":["../../src/views/Progress.tsx"],"sourcesContent":[],"mappings":";;;;iBAgBgB,YAAA;;;GAAkC,oBAAiB,kBAAA,CAAA,GAAA,CAAA"}
@@ -0,0 +1,115 @@
1
+ 'use client';
2
+
3
+ import { EngagementMeter } from "../components/EngagementMeter.js";
4
+ import { Card, CardContent, CardHeader, CardTitle } from "@contractspec/lib.ui-kit-web/ui/card";
5
+ import { BadgeDisplay, StreakCounter, XpBar } from "@contractspec/example.learning-journey-ui-shared";
6
+ import { jsx, jsxs } from "react/jsx-runtime";
7
+
8
+ //#region src/views/Progress.tsx
9
+ function ProgressView({ track, progress }) {
10
+ const totalXp = track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0);
11
+ const completedSteps = progress.completedStepIds.length;
12
+ const pendingSteps = track.steps.length - completedSteps;
13
+ const actioned = Math.floor(completedSteps * .7);
14
+ const acknowledged = completedSteps - actioned;
15
+ return /* @__PURE__ */ jsxs("div", {
16
+ className: "space-y-6",
17
+ children: [
18
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
19
+ className: "flex items-center gap-2",
20
+ children: [/* @__PURE__ */ jsx("span", { children: "📊" }), /* @__PURE__ */ jsx("span", { children: "Engagement Overview" })]
21
+ }) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(EngagementMeter, {
22
+ actioned,
23
+ acknowledged,
24
+ pending: pendingSteps,
25
+ streak: progress.streakDays
26
+ }) })] }),
27
+ /* @__PURE__ */ jsxs("div", {
28
+ className: "grid gap-4 md:grid-cols-2",
29
+ children: [/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
30
+ className: "pb-2",
31
+ children: /* @__PURE__ */ jsx(CardTitle, {
32
+ className: "text-muted-foreground text-sm font-medium",
33
+ children: "XP Earned"
34
+ })
35
+ }), /* @__PURE__ */ jsxs(CardContent, {
36
+ className: "space-y-3",
37
+ children: [/* @__PURE__ */ jsxs("div", {
38
+ className: "flex items-baseline gap-2",
39
+ children: [/* @__PURE__ */ jsx("span", {
40
+ className: "text-3xl font-bold text-orange-500",
41
+ children: progress.xpEarned
42
+ }), /* @__PURE__ */ jsxs("span", {
43
+ className: "text-muted-foreground",
44
+ children: [
45
+ "/ ",
46
+ totalXp,
47
+ " XP"
48
+ ]
49
+ })]
50
+ }), /* @__PURE__ */ jsx(XpBar, {
51
+ current: progress.xpEarned,
52
+ max: totalXp,
53
+ showLabel: false,
54
+ size: "lg"
55
+ })]
56
+ })] }), /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
57
+ className: "pb-2",
58
+ children: /* @__PURE__ */ jsx(CardTitle, {
59
+ className: "text-muted-foreground text-sm font-medium",
60
+ children: "Engagement Streak"
61
+ })
62
+ }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", {
63
+ className: "flex items-center gap-4",
64
+ children: [/* @__PURE__ */ jsx(StreakCounter, {
65
+ days: progress.streakDays,
66
+ size: "lg"
67
+ }), /* @__PURE__ */ jsx("div", {
68
+ className: "text-muted-foreground text-sm",
69
+ children: progress.streakDays > 0 ? "Keep going!" : "Start your streak today!"
70
+ })]
71
+ }) })] })]
72
+ }),
73
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
74
+ className: "flex items-center gap-2",
75
+ children: [/* @__PURE__ */ jsx("span", { children: "🏅" }), /* @__PURE__ */ jsx("span", { children: "Achievements" })]
76
+ }) }), /* @__PURE__ */ jsxs(CardContent, { children: [/* @__PURE__ */ jsx(BadgeDisplay, {
77
+ badges: progress.badges,
78
+ size: "lg",
79
+ maxVisible: 10
80
+ }), progress.badges.length === 0 && /* @__PURE__ */ jsx("p", {
81
+ className: "text-muted-foreground text-sm",
82
+ children: "Action tips to unlock achievements!"
83
+ })] })] }),
84
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
85
+ className: "flex items-center gap-2",
86
+ children: [/* @__PURE__ */ jsx("span", { children: "💡" }), /* @__PURE__ */ jsx("span", { children: "Tip Status" })]
87
+ }) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
88
+ className: "space-y-3",
89
+ children: track.steps.map((step) => {
90
+ const isCompleted = progress.completedStepIds.includes(step.id);
91
+ return /* @__PURE__ */ jsxs("div", {
92
+ className: "flex items-center justify-between rounded-lg border p-3",
93
+ children: [/* @__PURE__ */ jsxs("div", {
94
+ className: "flex items-center gap-3",
95
+ children: [/* @__PURE__ */ jsx("span", {
96
+ className: isCompleted ? "text-green-500" : "text-amber-500",
97
+ children: isCompleted ? "✓" : "○"
98
+ }), /* @__PURE__ */ jsx("span", {
99
+ className: isCompleted ? "text-muted-foreground" : "text-foreground",
100
+ children: step.title
101
+ })]
102
+ }), /* @__PURE__ */ jsx("span", {
103
+ className: `text-sm ${isCompleted ? "text-green-500" : "text-muted-foreground"}`,
104
+ children: isCompleted ? "Actioned" : "Pending"
105
+ })]
106
+ }, step.id);
107
+ })
108
+ }) })] })
109
+ ]
110
+ });
111
+ }
112
+
113
+ //#endregion
114
+ export { ProgressView as Progress, ProgressView };
115
+ //# sourceMappingURL=Progress.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Progress.js","names":[],"sources":["../../src/views/Progress.tsx"],"sourcesContent":["'use client';\n\nimport {\n Card,\n CardContent,\n CardHeader,\n CardTitle,\n} from '@contractspec/lib.ui-kit-web/ui/card';\nimport {\n XpBar,\n BadgeDisplay,\n StreakCounter,\n} from '@contractspec/example.learning-journey-ui-shared';\nimport { EngagementMeter } from '../components/EngagementMeter';\nimport type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';\n\nexport function ProgressView({ track, progress }: LearningViewProps) {\n const totalXp =\n track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0);\n\n const completedSteps = progress.completedStepIds.length;\n const totalSteps = track.steps.length;\n const pendingSteps = totalSteps - completedSteps;\n\n // For demo: split completed into \"actioned\" and \"acknowledged\"\n // In real app, this would come from progress data\n const actioned = Math.floor(completedSteps * 0.7);\n const acknowledged = completedSteps - actioned;\n\n return (\n <div className=\"space-y-6\">\n {/* Engagement Overview */}\n <Card>\n <CardHeader>\n <CardTitle className=\"flex items-center gap-2\">\n <span>📊</span>\n <span>Engagement Overview</span>\n </CardTitle>\n </CardHeader>\n <CardContent>\n <EngagementMeter\n actioned={actioned}\n acknowledged={acknowledged}\n pending={pendingSteps}\n streak={progress.streakDays}\n />\n </CardContent>\n </Card>\n\n {/* Stats Grid */}\n <div className=\"grid gap-4 md:grid-cols-2\">\n <Card>\n <CardHeader className=\"pb-2\">\n <CardTitle className=\"text-muted-foreground text-sm font-medium\">\n XP Earned\n </CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-3\">\n <div className=\"flex items-baseline gap-2\">\n <span className=\"text-3xl font-bold text-orange-500\">\n {progress.xpEarned}\n </span>\n <span className=\"text-muted-foreground\">/ {totalXp} XP</span>\n </div>\n <XpBar\n current={progress.xpEarned}\n max={totalXp}\n showLabel={false}\n size=\"lg\"\n />\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader className=\"pb-2\">\n <CardTitle className=\"text-muted-foreground text-sm font-medium\">\n Engagement Streak\n </CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"flex items-center gap-4\">\n <StreakCounter days={progress.streakDays} size=\"lg\" />\n <div className=\"text-muted-foreground text-sm\">\n {progress.streakDays > 0\n ? 'Keep going!'\n : 'Start your streak today!'}\n </div>\n </div>\n </CardContent>\n </Card>\n </div>\n\n {/* Achievements */}\n <Card>\n <CardHeader>\n <CardTitle className=\"flex items-center gap-2\">\n <span>🏅</span>\n <span>Achievements</span>\n </CardTitle>\n </CardHeader>\n <CardContent>\n <BadgeDisplay badges={progress.badges} size=\"lg\" maxVisible={10} />\n {progress.badges.length === 0 && (\n <p className=\"text-muted-foreground text-sm\">\n Action tips to unlock achievements!\n </p>\n )}\n </CardContent>\n </Card>\n\n {/* Tip Breakdown */}\n <Card>\n <CardHeader>\n <CardTitle className=\"flex items-center gap-2\">\n <span>💡</span>\n <span>Tip Status</span>\n </CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"space-y-3\">\n {track.steps.map((step) => {\n const isCompleted = progress.completedStepIds.includes(step.id);\n\n return (\n <div\n key={step.id}\n className=\"flex items-center justify-between rounded-lg border p-3\"\n >\n <div className=\"flex items-center gap-3\">\n <span\n className={\n isCompleted ? 'text-green-500' : 'text-amber-500'\n }\n >\n {isCompleted ? '✓' : '○'}\n </span>\n <span\n className={\n isCompleted\n ? 'text-muted-foreground'\n : 'text-foreground'\n }\n >\n {step.title}\n </span>\n </div>\n <span\n className={`text-sm ${\n isCompleted ? 'text-green-500' : 'text-muted-foreground'\n }`}\n >\n {isCompleted ? 'Actioned' : 'Pending'}\n </span>\n </div>\n );\n })}\n </div>\n </CardContent>\n </Card>\n </div>\n );\n}\n\nexport { ProgressView as Progress };\n"],"mappings":";;;;;;;;AAgBA,SAAgB,aAAa,EAAE,OAAO,YAA+B;CACnE,MAAM,UACJ,MAAM,WAAW,MAAM,MAAM,QAAQ,KAAK,MAAM,OAAO,EAAE,YAAY,IAAI,EAAE;CAE7E,MAAM,iBAAiB,SAAS,iBAAiB;CAEjD,MAAM,eADa,MAAM,MAAM,SACG;CAIlC,MAAM,WAAW,KAAK,MAAM,iBAAiB,GAAI;CACjD,MAAM,eAAe,iBAAiB;AAEtC,QACE,qBAAC;EAAI,WAAU;;GAEb,qBAAC,mBACC,oBAAC,wBACC,qBAAC;IAAU,WAAU;eACnB,oBAAC,oBAAK,OAAS,EACf,oBAAC,oBAAK,wBAA0B;KACtB,GACD,EACb,oBAAC,yBACC,oBAAC;IACW;IACI;IACd,SAAS;IACT,QAAQ,SAAS;KACjB,GACU,IACT;GAGP,qBAAC;IAAI,WAAU;eACb,qBAAC,mBACC,oBAAC;KAAW,WAAU;eACpB,oBAAC;MAAU,WAAU;gBAA4C;OAErD;MACD,EACb,qBAAC;KAAY,WAAU;gBACrB,qBAAC;MAAI,WAAU;iBACb,oBAAC;OAAK,WAAU;iBACb,SAAS;QACL,EACP,qBAAC;OAAK,WAAU;;QAAwB;QAAG;QAAQ;;QAAU;OACzD,EACN,oBAAC;MACC,SAAS,SAAS;MAClB,KAAK;MACL,WAAW;MACX,MAAK;OACL;MACU,IACT,EAEP,qBAAC,mBACC,oBAAC;KAAW,WAAU;eACpB,oBAAC;MAAU,WAAU;gBAA4C;OAErD;MACD,EACb,oBAAC,yBACC,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAc,MAAM,SAAS;MAAY,MAAK;OAAO,EACtD,oBAAC;MAAI,WAAU;gBACZ,SAAS,aAAa,IACnB,gBACA;OACA;MACF,GACM,IACT;KACH;GAGN,qBAAC,mBACC,oBAAC,wBACC,qBAAC;IAAU,WAAU;eACnB,oBAAC,oBAAK,OAAS,EACf,oBAAC,oBAAK,iBAAmB;KACf,GACD,EACb,qBAAC,0BACC,oBAAC;IAAa,QAAQ,SAAS;IAAQ,MAAK;IAAK,YAAY;KAAM,EAClE,SAAS,OAAO,WAAW,KAC1B,oBAAC;IAAE,WAAU;cAAgC;KAEzC,IAEM,IACT;GAGP,qBAAC,mBACC,oBAAC,wBACC,qBAAC;IAAU,WAAU;eACnB,oBAAC,oBAAK,OAAS,EACf,oBAAC,oBAAK,eAAiB;KACb,GACD,EACb,oBAAC,yBACC,oBAAC;IAAI,WAAU;cACZ,MAAM,MAAM,KAAK,SAAS;KACzB,MAAM,cAAc,SAAS,iBAAiB,SAAS,KAAK,GAAG;AAE/D,YACE,qBAAC;MAEC,WAAU;iBAEV,qBAAC;OAAI,WAAU;kBACb,oBAAC;QACC,WACE,cAAc,mBAAmB;kBAGlC,cAAc,MAAM;SAChB,EACP,oBAAC;QACC,WACE,cACI,0BACA;kBAGL,KAAK;SACD;QACH,EACN,oBAAC;OACC,WAAW,WACT,cAAc,mBAAmB;iBAGlC,cAAc,aAAa;QACvB;QA3BF,KAAK,GA4BN;MAER;KACE,GACM,IACT;;GACH"}
@@ -0,0 +1,12 @@
1
+ import { LearningViewProps } from "@contractspec/example.learning-journey-ui-shared";
2
+ import * as react_jsx_runtime2 from "react/jsx-runtime";
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 };
12
+ //# sourceMappingURL=Steps.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Steps.d.ts","names":[],"sources":["../../src/views/Steps.tsx"],"sourcesContent":[],"mappings":";;;;iBAKgB,KAAA;;;;GAA2C,oBAAiB,kBAAA,CAAA,GAAA,CAAA"}
@@ -0,0 +1,69 @@
1
+ 'use client';
2
+
3
+ import { TipCard } from "../components/TipCard.js";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+
6
+ //#region src/views/Steps.tsx
7
+ function Steps({ track, progress, onStepComplete }) {
8
+ const completedSteps = progress.completedStepIds.length;
9
+ const totalSteps = track.steps.length;
10
+ const sortedSteps = [...track.steps].sort((a, b) => {
11
+ const aCompleted = progress.completedStepIds.includes(a.id);
12
+ if (aCompleted === progress.completedStepIds.includes(b.id)) return 0;
13
+ return aCompleted ? 1 : -1;
14
+ });
15
+ const currentStepId = track.steps.find((s) => !progress.completedStepIds.includes(s.id))?.id;
16
+ return /* @__PURE__ */ jsxs("div", {
17
+ className: "space-y-6",
18
+ children: [
19
+ /* @__PURE__ */ jsxs("div", {
20
+ className: "text-center",
21
+ children: [
22
+ /* @__PURE__ */ jsx("h2", {
23
+ className: "text-xl font-bold",
24
+ children: "Coaching Tips"
25
+ }),
26
+ /* @__PURE__ */ jsx("p", {
27
+ className: "text-muted-foreground",
28
+ children: "Review and take action on personalized tips"
29
+ }),
30
+ /* @__PURE__ */ jsxs("p", {
31
+ className: "text-muted-foreground mt-2 text-sm",
32
+ children: [
33
+ completedSteps,
34
+ " of ",
35
+ totalSteps,
36
+ " tips actioned"
37
+ ]
38
+ })
39
+ ]
40
+ }),
41
+ /* @__PURE__ */ jsx("div", {
42
+ className: "space-y-3",
43
+ children: sortedSteps.map((step) => {
44
+ return /* @__PURE__ */ jsx(TipCard, {
45
+ step,
46
+ isCompleted: progress.completedStepIds.includes(step.id),
47
+ isCurrent: step.id === currentStepId,
48
+ onComplete: () => onStepComplete?.(step.id),
49
+ onDismiss: () => onStepComplete?.(step.id)
50
+ }, step.id);
51
+ })
52
+ }),
53
+ completedSteps === totalSteps && /* @__PURE__ */ jsxs("div", {
54
+ className: "text-muted-foreground text-center",
55
+ children: [/* @__PURE__ */ jsx("span", {
56
+ className: "text-2xl",
57
+ children: "✨"
58
+ }), /* @__PURE__ */ jsx("p", {
59
+ className: "mt-2",
60
+ children: "All tips have been addressed!"
61
+ })]
62
+ })
63
+ ]
64
+ });
65
+ }
66
+
67
+ //#endregion
68
+ export { Steps };
69
+ //# sourceMappingURL=Steps.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Steps.js","names":[],"sources":["../../src/views/Steps.tsx"],"sourcesContent":["'use client';\n\nimport { TipCard } from '../components/TipCard';\nimport type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';\n\nexport function Steps({ track, progress, onStepComplete }: LearningViewProps) {\n const completedSteps = progress.completedStepIds.length;\n const totalSteps = track.steps.length;\n\n // Sort: pending first, then completed\n const sortedSteps = [...track.steps].sort((a, b) => {\n const aCompleted = progress.completedStepIds.includes(a.id);\n const bCompleted = progress.completedStepIds.includes(b.id);\n if (aCompleted === bCompleted) return 0;\n return aCompleted ? 1 : -1;\n });\n\n const currentStepId = track.steps.find(\n (s) => !progress.completedStepIds.includes(s.id)\n )?.id;\n\n return (\n <div className=\"space-y-6\">\n {/* Header */}\n <div className=\"text-center\">\n <h2 className=\"text-xl font-bold\">Coaching Tips</h2>\n <p className=\"text-muted-foreground\">\n Review and take action on personalized tips\n </p>\n <p className=\"text-muted-foreground mt-2 text-sm\">\n {completedSteps} of {totalSteps} tips actioned\n </p>\n </div>\n\n {/* Tips Stack */}\n <div className=\"space-y-3\">\n {sortedSteps.map((step) => {\n const isCompleted = progress.completedStepIds.includes(step.id);\n const isCurrent = step.id === currentStepId;\n\n return (\n <TipCard\n key={step.id}\n step={step}\n isCompleted={isCompleted}\n isCurrent={isCurrent}\n onComplete={() => onStepComplete?.(step.id)}\n onDismiss={() => onStepComplete?.(step.id)} // Dismiss also completes\n />\n );\n })}\n </div>\n\n {/* All done */}\n {completedSteps === totalSteps && (\n <div className=\"text-muted-foreground text-center\">\n <span className=\"text-2xl\">✨</span>\n <p className=\"mt-2\">All tips have been addressed!</p>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;;AAKA,SAAgB,MAAM,EAAE,OAAO,UAAU,kBAAqC;CAC5E,MAAM,iBAAiB,SAAS,iBAAiB;CACjD,MAAM,aAAa,MAAM,MAAM;CAG/B,MAAM,cAAc,CAAC,GAAG,MAAM,MAAM,CAAC,MAAM,GAAG,MAAM;EAClD,MAAM,aAAa,SAAS,iBAAiB,SAAS,EAAE,GAAG;AAE3D,MAAI,eADe,SAAS,iBAAiB,SAAS,EAAE,GAAG,CAC5B,QAAO;AACtC,SAAO,aAAa,IAAI;GACxB;CAEF,MAAM,gBAAgB,MAAM,MAAM,MAC/B,MAAM,CAAC,SAAS,iBAAiB,SAAS,EAAE,GAAG,CACjD,EAAE;AAEH,QACE,qBAAC;EAAI,WAAU;;GAEb,qBAAC;IAAI,WAAU;;KACb,oBAAC;MAAG,WAAU;gBAAoB;OAAkB;KACpD,oBAAC;MAAE,WAAU;gBAAwB;OAEjC;KACJ,qBAAC;MAAE,WAAU;;OACV;OAAe;OAAK;OAAW;;OAC9B;;KACA;GAGN,oBAAC;IAAI,WAAU;cACZ,YAAY,KAAK,SAAS;AAIzB,YACE,oBAAC;MAEO;MACN,aAPgB,SAAS,iBAAiB,SAAS,KAAK,GAAG;MAQ3D,WAPc,KAAK,OAAO;MAQ1B,kBAAkB,iBAAiB,KAAK,GAAG;MAC3C,iBAAiB,iBAAiB,KAAK,GAAG;QALrC,KAAK,GAMV;MAEJ;KACE;GAGL,mBAAmB,cAClB,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAK,WAAU;eAAW;MAAQ,EACnC,oBAAC;KAAE,WAAU;eAAO;MAAiC;KACjD;;GAEJ"}
@@ -0,0 +1,11 @@
1
+ import { LearningViewProps } from "@contractspec/example.learning-journey-ui-shared";
2
+ import * as react_jsx_runtime4 from "react/jsx-runtime";
3
+
4
+ //#region src/views/Timeline.d.ts
5
+ declare function Timeline({
6
+ track,
7
+ progress
8
+ }: LearningViewProps): react_jsx_runtime4.JSX.Element;
9
+ //#endregion
10
+ export { Timeline };
11
+ //# sourceMappingURL=Timeline.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Timeline.d.ts","names":[],"sources":["../../src/views/Timeline.tsx"],"sourcesContent":[],"mappings":";;;;iBAWgB,QAAA;;;GAA8B,oBAAiB,kBAAA,CAAA,GAAA,CAAA"}
@@ -0,0 +1,113 @@
1
+ 'use client';
2
+
3
+ import { TipFeed } from "../components/TipFeed.js";
4
+ import { Card, CardContent, CardHeader, CardTitle } from "@contractspec/lib.ui-kit-web/ui/card";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
6
+
7
+ //#region src/views/Timeline.tsx
8
+ function Timeline({ track, progress }) {
9
+ const feedItems = track.steps.map((step) => ({
10
+ step,
11
+ isCompleted: progress.completedStepIds.includes(step.id),
12
+ completedAt: progress.completedStepIds.includes(step.id) ? "Recently" : void 0
13
+ })).sort((a, b) => {
14
+ if (a.isCompleted && !b.isCompleted) return -1;
15
+ if (!a.isCompleted && b.isCompleted) return 1;
16
+ return 0;
17
+ });
18
+ const completedCount = feedItems.filter((f) => f.isCompleted).length;
19
+ const pendingCount = feedItems.length - completedCount;
20
+ return /* @__PURE__ */ jsxs("div", {
21
+ className: "space-y-6",
22
+ children: [
23
+ /* @__PURE__ */ jsxs("div", {
24
+ className: "text-center",
25
+ children: [/* @__PURE__ */ jsx("h2", {
26
+ className: "text-xl font-bold",
27
+ children: "Activity Timeline"
28
+ }), /* @__PURE__ */ jsx("p", {
29
+ className: "text-muted-foreground",
30
+ children: "Your coaching journey and tip history"
31
+ })]
32
+ }),
33
+ /* @__PURE__ */ jsxs("div", {
34
+ className: "grid grid-cols-2 gap-4",
35
+ children: [/* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, {
36
+ className: "p-4 text-center",
37
+ children: [/* @__PURE__ */ jsx("div", {
38
+ className: "text-2xl font-bold text-green-500",
39
+ children: completedCount
40
+ }), /* @__PURE__ */ jsx("div", {
41
+ className: "text-muted-foreground text-sm",
42
+ children: "Tips Actioned"
43
+ })]
44
+ }) }), /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, {
45
+ className: "p-4 text-center",
46
+ children: [/* @__PURE__ */ jsx("div", {
47
+ className: "text-2xl font-bold text-amber-500",
48
+ children: pendingCount
49
+ }), /* @__PURE__ */ jsx("div", {
50
+ className: "text-muted-foreground text-sm",
51
+ children: "Tips Pending"
52
+ })]
53
+ }) })]
54
+ }),
55
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
56
+ className: "flex items-center gap-2",
57
+ children: [/* @__PURE__ */ jsx("span", { children: "📝" }), /* @__PURE__ */ jsx("span", { children: "Coaching Feed" })]
58
+ }) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(TipFeed, { items: feedItems }) })] }),
59
+ /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, {
60
+ className: "flex items-center gap-2",
61
+ children: [/* @__PURE__ */ jsx("span", { children: "📈" }), /* @__PURE__ */ jsx("span", { children: "Journey Stats" })]
62
+ }) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", {
63
+ className: "space-y-4",
64
+ children: [
65
+ /* @__PURE__ */ jsxs("div", {
66
+ className: "flex items-center justify-between",
67
+ children: [/* @__PURE__ */ jsx("span", {
68
+ className: "text-muted-foreground",
69
+ children: "Total Tips"
70
+ }), /* @__PURE__ */ jsx("span", {
71
+ className: "font-semibold",
72
+ children: track.steps.length
73
+ })]
74
+ }),
75
+ /* @__PURE__ */ jsxs("div", {
76
+ className: "flex items-center justify-between",
77
+ children: [/* @__PURE__ */ jsx("span", {
78
+ className: "text-muted-foreground",
79
+ children: "Completed"
80
+ }), /* @__PURE__ */ jsx("span", {
81
+ className: "font-semibold text-green-500",
82
+ children: completedCount
83
+ })]
84
+ }),
85
+ /* @__PURE__ */ jsxs("div", {
86
+ className: "flex items-center justify-between",
87
+ children: [/* @__PURE__ */ jsx("span", {
88
+ className: "text-muted-foreground",
89
+ children: "XP Earned"
90
+ }), /* @__PURE__ */ jsx("span", {
91
+ className: "font-semibold text-orange-500",
92
+ children: progress.xpEarned
93
+ })]
94
+ }),
95
+ /* @__PURE__ */ jsxs("div", {
96
+ className: "flex items-center justify-between",
97
+ children: [/* @__PURE__ */ jsx("span", {
98
+ className: "text-muted-foreground",
99
+ children: "Current Streak"
100
+ }), /* @__PURE__ */ jsx("span", {
101
+ className: "font-semibold",
102
+ children: progress.streakDays > 0 ? `🔥 ${progress.streakDays} days` : "Start today!"
103
+ })]
104
+ })
105
+ ]
106
+ }) })] })
107
+ ]
108
+ });
109
+ }
110
+
111
+ //#endregion
112
+ export { Timeline };
113
+ //# sourceMappingURL=Timeline.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Timeline.js","names":[],"sources":["../../src/views/Timeline.tsx"],"sourcesContent":["'use client';\n\nimport {\n Card,\n CardContent,\n CardHeader,\n CardTitle,\n} from '@contractspec/lib.ui-kit-web/ui/card';\nimport { TipFeed } from '../components/TipFeed';\nimport type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';\n\nexport function Timeline({ track, progress }: LearningViewProps) {\n // Create feed items sorted by completion status (completed first for \"recent activity\")\n const feedItems = track.steps\n .map((step) => ({\n step,\n isCompleted: progress.completedStepIds.includes(step.id),\n completedAt: progress.completedStepIds.includes(step.id)\n ? 'Recently'\n : undefined,\n }))\n .sort((a, b) => {\n // Completed items first (as recent activity)\n if (a.isCompleted && !b.isCompleted) return -1;\n if (!a.isCompleted && b.isCompleted) return 1;\n return 0;\n });\n\n const completedCount = feedItems.filter((f) => f.isCompleted).length;\n const pendingCount = feedItems.length - completedCount;\n\n return (\n <div className=\"space-y-6\">\n {/* Header */}\n <div className=\"text-center\">\n <h2 className=\"text-xl font-bold\">Activity Timeline</h2>\n <p className=\"text-muted-foreground\">\n Your coaching journey and tip history\n </p>\n </div>\n\n {/* Summary */}\n <div className=\"grid grid-cols-2 gap-4\">\n <Card>\n <CardContent className=\"p-4 text-center\">\n <div className=\"text-2xl font-bold text-green-500\">\n {completedCount}\n </div>\n <div className=\"text-muted-foreground text-sm\">Tips Actioned</div>\n </CardContent>\n </Card>\n <Card>\n <CardContent className=\"p-4 text-center\">\n <div className=\"text-2xl font-bold text-amber-500\">\n {pendingCount}\n </div>\n <div className=\"text-muted-foreground text-sm\">Tips Pending</div>\n </CardContent>\n </Card>\n </div>\n\n {/* Activity Feed */}\n <Card>\n <CardHeader>\n <CardTitle className=\"flex items-center gap-2\">\n <span>📝</span>\n <span>Coaching Feed</span>\n </CardTitle>\n </CardHeader>\n <CardContent>\n <TipFeed items={feedItems} />\n </CardContent>\n </Card>\n\n {/* Journey Stats */}\n <Card>\n <CardHeader>\n <CardTitle className=\"flex items-center gap-2\">\n <span>📈</span>\n <span>Journey Stats</span>\n </CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"space-y-4\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-muted-foreground\">Total Tips</span>\n <span className=\"font-semibold\">{track.steps.length}</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-muted-foreground\">Completed</span>\n <span className=\"font-semibold text-green-500\">\n {completedCount}\n </span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-muted-foreground\">XP Earned</span>\n <span className=\"font-semibold text-orange-500\">\n {progress.xpEarned}\n </span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-muted-foreground\">Current Streak</span>\n <span className=\"font-semibold\">\n {progress.streakDays > 0\n ? `🔥 ${progress.streakDays} days`\n : 'Start today!'}\n </span>\n </div>\n </div>\n </CardContent>\n </Card>\n </div>\n );\n}\n"],"mappings":";;;;;;;AAWA,SAAgB,SAAS,EAAE,OAAO,YAA+B;CAE/D,MAAM,YAAY,MAAM,MACrB,KAAK,UAAU;EACd;EACA,aAAa,SAAS,iBAAiB,SAAS,KAAK,GAAG;EACxD,aAAa,SAAS,iBAAiB,SAAS,KAAK,GAAG,GACpD,aACA;EACL,EAAE,CACF,MAAM,GAAG,MAAM;AAEd,MAAI,EAAE,eAAe,CAAC,EAAE,YAAa,QAAO;AAC5C,MAAI,CAAC,EAAE,eAAe,EAAE,YAAa,QAAO;AAC5C,SAAO;GACP;CAEJ,MAAM,iBAAiB,UAAU,QAAQ,MAAM,EAAE,YAAY,CAAC;CAC9D,MAAM,eAAe,UAAU,SAAS;AAExC,QACE,qBAAC;EAAI,WAAU;;GAEb,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAG,WAAU;eAAoB;MAAsB,EACxD,oBAAC;KAAE,WAAU;eAAwB;MAEjC;KACA;GAGN,qBAAC;IAAI,WAAU;eACb,oBAAC,kBACC,qBAAC;KAAY,WAAU;gBACrB,oBAAC;MAAI,WAAU;gBACZ;OACG,EACN,oBAAC;MAAI,WAAU;gBAAgC;OAAmB;MACtD,GACT,EACP,oBAAC,kBACC,qBAAC;KAAY,WAAU;gBACrB,oBAAC;MAAI,WAAU;gBACZ;OACG,EACN,oBAAC;MAAI,WAAU;gBAAgC;OAAkB;MACrD,GACT;KACH;GAGN,qBAAC,mBACC,oBAAC,wBACC,qBAAC;IAAU,WAAU;eACnB,oBAAC,oBAAK,OAAS,EACf,oBAAC,oBAAK,kBAAoB;KAChB,GACD,EACb,oBAAC,yBACC,oBAAC,WAAQ,OAAO,YAAa,GACjB,IACT;GAGP,qBAAC,mBACC,oBAAC,wBACC,qBAAC;IAAU,WAAU;eACnB,oBAAC,oBAAK,OAAS,EACf,oBAAC,oBAAK,kBAAoB;KAChB,GACD,EACb,oBAAC,yBACC,qBAAC;IAAI,WAAU;;KACb,qBAAC;MAAI,WAAU;iBACb,oBAAC;OAAK,WAAU;iBAAwB;QAAiB,EACzD,oBAAC;OAAK,WAAU;iBAAiB,MAAM,MAAM;QAAc;OACvD;KACN,qBAAC;MAAI,WAAU;iBACb,oBAAC;OAAK,WAAU;iBAAwB;QAAgB,EACxD,oBAAC;OAAK,WAAU;iBACb;QACI;OACH;KACN,qBAAC;MAAI,WAAU;iBACb,oBAAC;OAAK,WAAU;iBAAwB;QAAgB,EACxD,oBAAC;OAAK,WAAU;iBACb,SAAS;QACL;OACH;KACN,qBAAC;MAAI,WAAU;iBACb,oBAAC;OAAK,WAAU;iBAAwB;QAAqB,EAC7D,oBAAC;OAAK,WAAU;iBACb,SAAS,aAAa,IACnB,MAAM,SAAS,WAAW,SAC1B;QACC;OACH;;KACF,GACM,IACT;;GACH"}
@@ -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/example.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './src/example';