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