@contractspec/example.learning-journey-ui-onboarding 1.44.0

package/src/views/Progress.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@contractspec/lib.ui-kit-web/ui/card';
+import { Progress } from '@contractspec/lib.ui-kit-web/ui/progress';
+import {
+  XpBar,
+  BadgeDisplay,
+} from '@contractspec/example.learning-journey-ui-shared';
+import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
+
+export function ProgressView({ track, progress }: LearningViewProps) {
+  const totalSteps = track.steps.length;
+  const completedSteps = progress.completedStepIds.length;
+  const percentComplete =
+    totalSteps > 0 ? (completedSteps / totalSteps) * 100 : 0;
+
+  const totalXp =
+    track.totalXp ??
+    track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) +
+      (track.completionRewards?.xpBonus ?? 0);
+
+  const remainingSteps = totalSteps - completedSteps;
+  const estimatedMinutes = remainingSteps * 5;
+
+  return (
+    <div className="space-y-6">
+      {/* Main Progress */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>📈</span>
+            <span>Your Progress</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Circular progress indicator */}
+          <div className="flex items-center justify-center">
+            <div className="relative flex h-40 w-40 items-center justify-center">
+              <svg
+                className="absolute h-full w-full -rotate-90"
+                viewBox="0 0 100 100"
+              >
+                <circle
+                  cx="50"
+                  cy="50"
+                  r="45"
+                  fill="none"
+                  strokeWidth="8"
+                  className="stroke-muted"
+                />
+                <circle
+                  cx="50"
+                  cy="50"
+                  r="45"
+                  fill="none"
+                  strokeWidth="8"
+                  strokeLinecap="round"
+                  strokeDasharray={`${percentComplete * 2.83} 283`}
+                  className="stroke-blue-500 transition-all duration-500"
+                />
+              </svg>
+              <div className="text-center">
+                <div className="text-3xl font-bold">
+                  {Math.round(percentComplete)}%
+                </div>
+                <div className="text-muted-foreground text-sm">Complete</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Stats row */}
+          <div className="grid grid-cols-3 gap-4 text-center">
+            <div>
+              <div className="text-2xl font-bold text-green-500">
+                {completedSteps}
+              </div>
+              <div className="text-muted-foreground text-sm">Completed</div>
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-orange-500">
+                {remainingSteps}
+              </div>
+              <div className="text-muted-foreground text-sm">Remaining</div>
+            </div>
+            <div>
+              <div className="text-2xl font-bold">{estimatedMinutes}m</div>
+              <div className="text-muted-foreground text-sm">Est. Time</div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 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-3xl font-bold text-blue-500">
+              {progress.xpEarned}
+            </span>
+            <span className="text-muted-foreground">/ {totalXp} XP</span>
+          </div>
+          <XpBar
+            current={progress.xpEarned}
+            max={totalXp}
+            showLabel={false}
+            size="lg"
+          />
+        </CardContent>
+      </Card>
+
+      {/* Badges */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>🏅</span>
+            <span>Achievements</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BadgeDisplay badges={progress.badges} size="lg" />
+          {progress.badges.length === 0 &&
+            track.completionRewards?.badgeKey && (
+              <p className="text-muted-foreground text-sm">
+                Complete all steps to earn the "
+                {track.completionRewards.badgeKey}" badge!
+              </p>
+            )}
+        </CardContent>
+      </Card>
+
+      {/* Step-by-step breakdown */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>📋</span>
+            <span>Step Details</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {track.steps.map((step, index) => {
+              const isCompleted = progress.completedStepIds.includes(step.id);
+              const stepProgress = isCompleted ? 100 : 0;
+
+              return (
+                <div key={step.id} className="space-y-1">
+                  <div className="flex items-center justify-between text-sm">
+                    <span
+                      className={
+                        isCompleted ? 'text-green-500' : 'text-foreground'
+                      }
+                    >
+                      {index + 1}. {step.title}
+                    </span>
+                    <span
+                      className={
+                        isCompleted ? 'text-green-500' : 'text-muted-foreground'
+                      }
+                    >
+                      {isCompleted ? '✓' : 'Pending'}
+                    </span>
+                  </div>
+                  <Progress value={stepProgress} className="h-1" />
+                </div>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+// Re-export with correct name
+export { ProgressView as Progress };

package/src/views/Steps.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { useState } from 'react';
+import { Progress } from '@contractspec/lib.ui-kit-web/ui/progress';
+import { StepChecklist } from '../components/StepChecklist';
+import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
+
+export function Steps({ track, progress, onStepComplete }: LearningViewProps) {
+  const [expandedStepId, setExpandedStepId] = useState<string | null>(() => {
+    // Auto-expand first incomplete step
+    const firstIncomplete = track.steps.find(
+      (s) => !progress.completedStepIds.includes(s.id)
+    );
+    return firstIncomplete?.id ?? null;
+  });
+
+  const completedSteps = progress.completedStepIds.length;
+  const totalSteps = track.steps.length;
+  const percentComplete =
+    totalSteps > 0 ? (completedSteps / totalSteps) * 100 : 0;
+
+  const currentStepIndex = track.steps.findIndex(
+    (s) => !progress.completedStepIds.includes(s.id)
+  );
+
+  return (
+    <div className="space-y-6">
+      {/* Progress Header */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-bold">Complete Each Step</h2>
+          <span className="text-muted-foreground text-sm">
+            {completedSteps} / {totalSteps} completed
+          </span>
+        </div>
+        <Progress value={percentComplete} className="h-2" />
+      </div>
+
+      {/* Steps List */}
+      <div className="space-y-3">
+        {track.steps.map((step, index) => {
+          const isCompleted = progress.completedStepIds.includes(step.id);
+          const isCurrent = index === currentStepIndex;
+
+          return (
+            <StepChecklist
+              key={step.id}
+              step={step}
+              stepNumber={index + 1}
+              isCompleted={isCompleted}
+              isCurrent={isCurrent}
+              isExpanded={expandedStepId === step.id}
+              onToggle={() =>
+                setExpandedStepId(expandedStepId === step.id ? null : step.id)
+              }
+              onComplete={() => {
+                onStepComplete?.(step.id);
+                // Auto-expand next step
+                const nextStep = track.steps[index + 1];
+                if (
+                  nextStep &&
+                  !progress.completedStepIds.includes(nextStep.id)
+                ) {
+                  setExpandedStepId(nextStep.id);
+                }
+              }}
+            />
+          );
+        })}
+      </div>
+
+      {/* Completion rewards hint */}
+      {track.completionRewards && percentComplete < 100 && (
+        <div className="rounded-lg border border-blue-500/30 bg-blue-500/5 p-4">
+          <p className="text-sm">
+            🎁 Complete all steps to unlock:
+            {track.completionRewards.xpBonus && (
+              <span className="ml-2 font-semibold text-blue-500">
+                +{track.completionRewards.xpBonus} XP bonus
+              </span>
+            )}
+            {track.completionRewards.badgeKey && (
+              <span className="ml-2 font-semibold text-amber-500">
+                + "{track.completionRewards.badgeKey}" badge
+              </span>
+            )}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/views/Timeline.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@contractspec/lib.ui-kit-web/ui/card';
+import { JourneyMap } from '../components/JourneyMap';
+import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
+
+export function Timeline({ track, progress }: LearningViewProps) {
+  // Find current step
+  const currentStepId =
+    track.steps.find((s) => !progress.completedStepIds.includes(s.id))?.id ??
+    null;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="text-center">
+        <h2 className="text-xl font-bold">Your Learning Journey</h2>
+        <p className="text-muted-foreground">
+          Follow the path through each surface and feature
+        </p>
+      </div>
+
+      {/* Journey Map */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>🗺️</span>
+            <span>Journey Map</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <JourneyMap
+            steps={track.steps}
+            completedStepIds={progress.completedStepIds}
+            currentStepId={currentStepId}
+          />
+        </CardContent>
+      </Card>
+
+      {/* Detailed Timeline */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>📍</span>
+            <span>Step by Step</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="relative">
+            {/* Vertical line */}
+            <div className="bg-border absolute top-0 left-4 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 = step.id === currentStepId;
+                const surface = (step.metadata?.surface as string) ?? 'general';
+
+                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 transition-all ${
+                        isCompleted
+                          ? 'border-green-500 bg-green-500 text-white'
+                          : isCurrent
+                            ? 'border-blue-500 bg-blue-500 text-white ring-4 ring-blue-500/20'
+                            : 'border-border bg-background text-muted-foreground'
+                      }`}
+                    >
+                      {isCompleted ? '✓' : index + 1}
+                    </div>
+
+                    {/* Content */}
+                    <div className="flex-1 pb-2">
+                      <div className="rounded-lg border p-4">
+                        <div className="flex items-start justify-between gap-2">
+                          <div>
+                            <div className="flex items-center gap-2">
+                              <h4
+                                className={`font-semibold ${
+                                  isCompleted
+                                    ? 'text-green-500'
+                                    : isCurrent
+                                      ? 'text-blue-500'
+                                      : 'text-foreground'
+                                }`}
+                              >
+                                {step.title}
+                              </h4>
+                              <span className="bg-muted text-muted-foreground rounded px-2 py-0.5 text-xs">
+                                {surface}
+                              </span>
+                            </div>
+                            <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>
+
+                        {/* Status */}
+                        <div className="mt-3 text-xs">
+                          {isCompleted ? (
+                            <span className="text-green-500">✓ Completed</span>
+                          ) : isCurrent ? (
+                            <span className="text-blue-500">→ In Progress</span>
+                          ) : (
+                            <span className="text-muted-foreground">
+                              ○ Not Started
+                            </span>
+                          )}
+                        </div>
+                      </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"
+  }
+}
+