@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.
- package/.turbo/turbo-build$colon$bundle.log +57 -0
- package/.turbo/turbo-build.log +58 -0
- package/CHANGELOG.md +466 -0
- package/LICENSE +21 -0
- package/README.md +32 -0
- package/dist/CoachingMiniApp.d.ts +17 -0
- package/dist/CoachingMiniApp.d.ts.map +1 -0
- package/dist/CoachingMiniApp.js +63 -0
- package/dist/CoachingMiniApp.js.map +1 -0
- package/dist/components/EngagementMeter.d.ts +18 -0
- package/dist/components/EngagementMeter.d.ts.map +1 -0
- package/dist/components/EngagementMeter.js +108 -0
- package/dist/components/EngagementMeter.js.map +1 -0
- package/dist/components/TipCard.d.ts +21 -0
- package/dist/components/TipCard.d.ts.map +1 -0
- package/dist/components/TipCard.js +76 -0
- package/dist/components/TipCard.js.map +1 -0
- package/dist/components/TipFeed.d.ts +18 -0
- package/dist/components/TipFeed.d.ts.map +1 -0
- package/dist/components/TipFeed.js +66 -0
- package/dist/components/TipFeed.js.map +1 -0
- package/dist/components/index.d.ts +4 -0
- package/dist/components/index.js +5 -0
- package/dist/docs/index.d.ts +1 -0
- package/dist/docs/index.js +1 -0
- package/dist/docs/learning-journey-ui-coaching.docblock.d.ts +1 -0
- package/dist/docs/learning-journey-ui-coaching.docblock.js +20 -0
- package/dist/docs/learning-journey-ui-coaching.docblock.js.map +1 -0
- package/dist/example.d.ts +7 -0
- package/dist/example.d.ts.map +1 -0
- package/dist/example.js +42 -0
- package/dist/example.js.map +1 -0
- package/dist/index.d.ts +12 -0
- package/dist/index.js +14 -0
- package/dist/views/Overview.d.ts +16 -0
- package/dist/views/Overview.d.ts.map +1 -0
- package/dist/views/Overview.js +151 -0
- package/dist/views/Overview.js.map +1 -0
- package/dist/views/Progress.d.ts +11 -0
- package/dist/views/Progress.d.ts.map +1 -0
- package/dist/views/Progress.js +115 -0
- package/dist/views/Progress.js.map +1 -0
- package/dist/views/Steps.d.ts +12 -0
- package/dist/views/Steps.d.ts.map +1 -0
- package/dist/views/Steps.js +69 -0
- package/dist/views/Steps.js.map +1 -0
- package/dist/views/Timeline.d.ts +11 -0
- package/dist/views/Timeline.d.ts.map +1 -0
- package/dist/views/Timeline.js +113 -0
- package/dist/views/Timeline.js.map +1 -0
- package/dist/views/index.d.ts +5 -0
- package/dist/views/index.js +6 -0
- package/example.ts +1 -0
- package/package.json +76 -0
- package/src/CoachingMiniApp.tsx +93 -0
- package/src/components/EngagementMeter.tsx +93 -0
- package/src/components/TipCard.tsx +101 -0
- package/src/components/TipFeed.tsx +101 -0
- package/src/components/index.ts +3 -0
- package/src/docs/index.ts +1 -0
- package/src/docs/learning-journey-ui-coaching.docblock.ts +17 -0
- package/src/example.ts +31 -0
- package/src/index.ts +10 -0
- package/src/views/Overview.tsx +157 -0
- package/src/views/Progress.tsx +164 -0
- package/src/views/Steps.tsx +63 -0
- package/src/views/Timeline.tsx +114 -0
- package/src/views/index.ts +4 -0
- package/tsconfig.json +10 -0
- package/tsconfig.tsbuildinfo +1 -0
- 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"}
|
package/example.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './src/example';
|