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

package/src/views/Progress.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@contractspec/lib.ui-kit-web/ui/card';
+import {
+  XpBar,
+  BadgeDisplay,
+} from '@contractspec/example.learning-journey-ui-shared';
+import { MasteryRing } from '../components/MasteryRing';
+import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
+
+export function Progress({ track, progress }: LearningViewProps) {
+  const totalXp =
+    track.totalXp ??
+    track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) +
+      (track.completionRewards?.xpBonus ?? 0);
+
+  const completedSteps = progress.completedStepIds.length;
+  const totalSteps = track.steps.length;
+  const percentComplete =
+    totalSteps > 0 ? (completedSteps / totalSteps) * 100 : 0;
+
+  // Group steps by metadata surface for mastery rings
+  const surfaces = new Map<string, { total: number; completed: number }>();
+  track.steps.forEach((step) => {
+    const surface = (step.metadata?.surface as string) ?? 'general';
+    const current = surfaces.get(surface) ?? { total: 0, completed: 0 };
+    surfaces.set(surface, {
+      total: current.total + 1,
+      completed:
+        current.completed +
+        (progress.completedStepIds.includes(step.id) ? 1 : 0),
+    });
+  });
+
+  const surfaceColors: ('green' | 'blue' | 'violet' | 'orange')[] = [
+    'green',
+    'blue',
+    'violet',
+    'orange',
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* XP Progress */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>⚡</span>
+            <span>Experience Points</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-baseline gap-2">
+            <span className="text-4xl font-bold text-violet-500">
+              {progress.xpEarned.toLocaleString()}
+            </span>
+            <span className="text-muted-foreground">
+              / {totalXp.toLocaleString()} XP
+            </span>
+          </div>
+          <XpBar
+            current={progress.xpEarned}
+            max={totalXp}
+            showLabel={false}
+            size="lg"
+          />
+
+          {track.completionRewards?.xpBonus && percentComplete < 100 && (
+            <p className="text-muted-foreground text-sm">
+              🎁 Complete all steps for a{' '}
+              <span className="font-semibold text-green-500">
+                +{track.completionRewards.xpBonus} XP
+              </span>{' '}
+              bonus!
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Mastery Rings */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>🎯</span>
+            <span>Skill Mastery</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap justify-center gap-6">
+            {Array.from(surfaces.entries()).map(([surface, data], index) => (
+              <MasteryRing
+                key={surface}
+                label={surface.charAt(0).toUpperCase() + surface.slice(1)}
+                percentage={(data.completed / data.total) * 100}
+                color={surfaceColors[index % surfaceColors.length]}
+                size="lg"
+              />
+            ))}
+            <MasteryRing
+              label="Overall"
+              percentage={percentComplete}
+              color="violet"
+              size="lg"
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Badges */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>🏅</span>
+            <span>Badges Earned</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BadgeDisplay badges={progress.badges} size="lg" maxVisible={10} />
+          {progress.badges.length === 0 && (
+            <p className="text-muted-foreground text-sm">
+              Complete the track to earn your first badge!
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Step Breakdown */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>📊</span>
+            <span>Step Breakdown</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-2">
+            {track.steps.map((step) => {
+              const isCompleted = progress.completedStepIds.includes(step.id);
+              return (
+                <div
+                  key={step.id}
+                  className="flex items-center justify-between rounded-lg border p-3"
+                >
+                  <div className="flex items-center gap-3">
+                    <span
+                      className={
+                        isCompleted ? 'text-green-500' : 'text-muted-foreground'
+                      }
+                    >
+                      {isCompleted ? '✓' : '○'}
+                    </span>
+                    <span
+                      className={
+                        isCompleted
+                          ? 'text-foreground'
+                          : 'text-muted-foreground'
+                      }
+                    >
+                      {step.title}
+                    </span>
+                  </div>
+                  {step.xpReward && (
+                    <span
+                      className={`text-sm font-medium ${isCompleted ? 'text-green-500' : 'text-muted-foreground'}`}
+                    >
+                      {isCompleted ? '+' : ''}
+                      {step.xpReward} XP
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/views/Steps.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { FlashCard } from '../components/FlashCard';
+import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
+
+export function Steps({ track, progress, onStepComplete }: LearningViewProps) {
+  const currentStepIndex = track.steps.findIndex(
+    (s) => !progress.completedStepIds.includes(s.id)
+  );
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="text-center">
+        <h2 className="text-xl font-bold">Complete Your Challenges</h2>
+        <p className="text-muted-foreground">
+          Tap each card to reveal the action, then mark as complete
+        </p>
+      </div>
+
+      {/* Card Stack */}
+      <div className="grid gap-4 md:grid-cols-2">
+        {track.steps.map((step, index) => {
+          const isCompleted = progress.completedStepIds.includes(step.id);
+          const isCurrent = index === currentStepIndex;
+
+          return (
+            <FlashCard
+              key={step.id}
+              step={step}
+              isCompleted={isCompleted}
+              isCurrent={isCurrent}
+              onComplete={() => onStepComplete?.(step.id)}
+            />
+          );
+        })}
+      </div>
+
+      {/* Progress Summary */}
+      <div className="text-muted-foreground text-center text-sm">
+        {progress.completedStepIds.length} of {track.steps.length} completed
+        {track.completionRewards?.xpBonus && (
+          <span className="ml-2 text-green-500">
+            (+{track.completionRewards.xpBonus} XP bonus on completion)
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/views/Timeline.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@contractspec/lib.ui-kit-web/ui/card';
+import { DayCalendar } from '../components/DayCalendar';
+import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
+
+export function Timeline({ track, progress }: LearningViewProps) {
+  // Check if this is a quest with day unlocks
+  const hasQuestDays = track.steps.some(
+    (s) => s.availability?.unlockOnDay !== undefined
+  );
+
+  if (hasQuestDays) {
+    // Quest-style calendar view
+    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);
+
+    // Current day is the first incomplete day
+    const currentDay =
+      track.steps.find((s) => !progress.completedStepIds.includes(s.id))
+        ?.availability?.unlockOnDay ?? 1;
+
+    return (
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="text-center">
+          <h2 className="text-xl font-bold">{track.name}</h2>
+          <p className="text-muted-foreground">
+            Complete each day's challenge to progress
+          </p>
+        </div>
+
+        {/* Calendar Grid */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <span>📅</span>
+              <span>Your Journey</span>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="flex justify-center">
+            <DayCalendar
+              totalDays={totalDays}
+              currentDay={currentDay}
+              completedDays={completedDays}
+            />
+          </CardContent>
+        </Card>
+
+        {/* Daily Steps */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <span>📝</span>
+              <span>Daily Challenges</span>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              {track.steps.map((step) => {
+                const day = step.availability?.unlockOnDay ?? 1;
+                const isCompleted = progress.completedStepIds.includes(step.id);
+                const isLocked = day > currentDay;
+
+                return (
+                  <div
+                    key={step.id}
+                    className={`flex items-start gap-4 rounded-lg border p-4 ${
+                      isLocked ? 'opacity-50' : ''
+                    }`}
+                  >
+                    <div className="bg-muted flex h-10 w-10 shrink-0 items-center justify-center rounded-lg font-semibold">
+                      {isCompleted ? '✓' : isLocked ? '🔒' : day}
+                    </div>
+                    <div className="flex-1">
+                      <h4 className="font-semibold">{step.title}</h4>
+                      <p className="text-muted-foreground text-sm">
+                        {step.description}
+                      </p>
+                    </div>
+                    {step.xpReward && (
+                      <span
+                        className={`text-sm font-medium ${
+                          isCompleted
+                            ? 'text-green-500'
+                            : 'text-muted-foreground'
+                        }`}
+                      >
+                        +{step.xpReward} XP
+                      </span>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  // Drill-style timeline (step order)
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="text-center">
+        <h2 className="text-xl font-bold">Learning Path</h2>
+        <p className="text-muted-foreground">
+          Follow the steps to master this skill
+        </p>
+      </div>
+
+      {/* Timeline */}
+      <Card>
+        <CardContent className="p-6">
+          <div className="relative">
+            {/* Vertical line */}
+            <div className="bg-border absolute top-0 left-5 h-full w-0.5" />
+
+            {/* Steps */}
+            <div className="space-y-6">
+              {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 (
+                  <div key={step.id} className="relative flex gap-4 pl-2">
+                    {/* Node */}
+                    <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'
+                      }`}
+                    >
+                      {isCompleted ? '✓' : index + 1}
+                    </div>
+
+                    {/* Content */}
+                    <div className="flex-1 pb-4">
+                      <div className="flex items-start justify-between gap-2">
+                        <div>
+                          <h4
+                            className={`font-semibold ${
+                              isCompleted
+                                ? 'text-foreground'
+                                : isCurrent
+                                  ? 'text-violet-500'
+                                  : 'text-muted-foreground'
+                            }`}
+                          >
+                            {step.title}
+                          </h4>
+                          <p className="text-muted-foreground mt-1 text-sm">
+                            {step.description}
+                          </p>
+                        </div>
+                        {step.xpReward && (
+                          <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'
+                            }`}
+                          >
+                            +{step.xpReward} XP
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/views/index.ts

@@ -0,0 +1,4 @@
+export { Overview } from './Overview';
+export { Steps } from './Steps';
+export { Progress } from './Progress';
+export { Timeline } from './Timeline';

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@contractspec/tool.typescript/react-library.json",
+  "include": ["src"],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  }
+}
+