@contractspec/example.learning-journey-ui-gamified 1.56.1 → 1.58.0

package/dist/browser/views/Timeline.js

@@ -0,0 +1,235 @@
+// src/components/DayCalendar.tsx
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+"use client";
+function DayCalendar({
+  totalDays,
+  currentDay,
+  completedDays
+}) {
+  const days = Array.from({ length: totalDays }, (_, i) => i + 1);
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "grid grid-cols-7 gap-2",
+    children: days.map((day) => {
+      const isCompleted = completedDays.includes(day);
+      const isCurrent = day === currentDay;
+      const isLocked = day > currentDay;
+      return /* @__PURE__ */ jsxDEV("div", {
+        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"),
+        children: isCompleted ? /* @__PURE__ */ jsxDEV("span", {
+          className: "text-lg",
+          children: "✓"
+        }, undefined, false, undefined, this) : isLocked ? /* @__PURE__ */ jsxDEV("span", {
+          className: "text-lg",
+          children: "\uD83D\uDD12"
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Fragment, {
+          children: [
+            /* @__PURE__ */ jsxDEV("span", {
+              className: "text-muted-foreground text-xs",
+              children: "Day"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("span", {
+              children: day
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, day, false, undefined, this);
+    })
+  }, undefined, false, undefined, this);
+}
+
+// src/views/Timeline.tsx
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "@contractspec/lib.ui-kit-web/ui/card";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function Timeline({ track, progress }) {
+  const hasQuestDays = track.steps.some((s) => s.availability?.unlockOnDay !== undefined);
+  if (hasQuestDays) {
+    const totalDays = Math.max(...track.steps.map((s) => s.availability?.unlockOnDay ?? 1), 7);
+    const completedDays = track.steps.filter((s) => progress.completedStepIds.includes(s.id)).map((s) => s.availability?.unlockOnDay ?? 1);
+    const currentDay = track.steps.find((s) => !progress.completedStepIds.includes(s.id))?.availability?.unlockOnDay ?? 1;
+    return /* @__PURE__ */ jsxDEV2("div", {
+      className: "space-y-6",
+      children: [
+        /* @__PURE__ */ jsxDEV2("div", {
+          className: "text-center",
+          children: [
+            /* @__PURE__ */ jsxDEV2("h2", {
+              className: "text-xl font-bold",
+              children: track.name
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2("p", {
+              className: "text-muted-foreground",
+              children: "Complete each day's challenge to progress"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV2(Card, {
+          children: [
+            /* @__PURE__ */ jsxDEV2(CardHeader, {
+              children: /* @__PURE__ */ jsxDEV2(CardTitle, {
+                className: "flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    children: "\uD83D\uDCC5"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    children: "Your Journey"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2(CardContent, {
+              className: "flex justify-center",
+              children: /* @__PURE__ */ jsxDEV2(DayCalendar, {
+                totalDays,
+                currentDay,
+                completedDays
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV2(Card, {
+          children: [
+            /* @__PURE__ */ jsxDEV2(CardHeader, {
+              children: /* @__PURE__ */ jsxDEV2(CardTitle, {
+                className: "flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    children: "\uD83D\uDCDD"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    children: "Daily Challenges"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2(CardContent, {
+              children: /* @__PURE__ */ jsxDEV2("div", {
+                className: "space-y-3",
+                children: track.steps.map((step) => {
+                  const day = step.availability?.unlockOnDay ?? 1;
+                  const isCompleted = progress.completedStepIds.includes(step.id);
+                  const isLocked = day > currentDay;
+                  return /* @__PURE__ */ jsxDEV2("div", {
+                    className: `flex items-start gap-4 rounded-lg border p-4 ${isLocked ? "opacity-50" : ""}`,
+                    children: [
+                      /* @__PURE__ */ jsxDEV2("div", {
+                        className: "bg-muted flex h-10 w-10 shrink-0 items-center justify-center rounded-lg font-semibold",
+                        children: isCompleted ? "✓" : isLocked ? "\uD83D\uDD12" : day
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("div", {
+                        className: "flex-1",
+                        children: [
+                          /* @__PURE__ */ jsxDEV2("h4", {
+                            className: "font-semibold",
+                            children: step.title
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV2("p", {
+                            className: "text-muted-foreground text-sm",
+                            children: step.description
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      step.xpReward && /* @__PURE__ */ jsxDEV2("span", {
+                        className: `text-sm font-medium ${isCompleted ? "text-green-500" : "text-muted-foreground"}`,
+                        children: [
+                          "+",
+                          step.xpReward,
+                          " XP"
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, step.id, true, undefined, this);
+                })
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "text-center",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "text-xl font-bold",
+            children: "Learning Path"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            className: "text-muted-foreground",
+            children: "Follow the steps to master this skill"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2(Card, {
+        children: /* @__PURE__ */ jsxDEV2(CardContent, {
+          className: "p-6",
+          children: /* @__PURE__ */ jsxDEV2("div", {
+            className: "relative",
+            children: [
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "bg-border absolute top-0 left-5 h-full w-0.5"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "space-y-6",
+                children: track.steps.map((step, index) => {
+                  const isCompleted = progress.completedStepIds.includes(step.id);
+                  const isCurrent = !isCompleted && track.steps.slice(0, index).every((s) => progress.completedStepIds.includes(s.id));
+                  return /* @__PURE__ */ jsxDEV2("div", {
+                    className: "relative flex gap-4 pl-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2("div", {
+                        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"}`,
+                        children: isCompleted ? "✓" : index + 1
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("div", {
+                        className: "flex-1 pb-4",
+                        children: /* @__PURE__ */ jsxDEV2("div", {
+                          className: "flex items-start justify-between gap-2",
+                          children: [
+                            /* @__PURE__ */ jsxDEV2("div", {
+                              children: [
+                                /* @__PURE__ */ jsxDEV2("h4", {
+                                  className: `font-semibold ${isCompleted ? "text-foreground" : isCurrent ? "text-violet-500" : "text-muted-foreground"}`,
+                                  children: step.title
+                                }, undefined, false, undefined, this),
+                                /* @__PURE__ */ jsxDEV2("p", {
+                                  className: "text-muted-foreground mt-1 text-sm",
+                                  children: step.description
+                                }, undefined, false, undefined, this)
+                              ]
+                            }, undefined, true, undefined, this),
+                            step.xpReward && /* @__PURE__ */ jsxDEV2("span", {
+                              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"}`,
+                              children: [
+                                "+",
+                                step.xpReward,
+                                " XP"
+                              ]
+                            }, undefined, true, undefined, this)
+                          ]
+                        }, undefined, true, undefined, this)
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, step.id, true, undefined, this);
+                })
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  Timeline
+};