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

package/src/views/Overview.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+import { Button } from '@contractspec/lib.design-system';
+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 } from '@contractspec/example.learning-journey-ui-shared';
+import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
+
+interface OnboardingOverviewProps extends LearningViewProps {
+  onStart?: () => void;
+}
+
+export function Overview({
+  track,
+  progress,
+  onStart,
+}: OnboardingOverviewProps) {
+  const totalSteps = track.steps.length;
+  const completedSteps = progress.completedStepIds.length;
+  const percentComplete =
+    totalSteps > 0 ? (completedSteps / totalSteps) * 100 : 0;
+  const isComplete = completedSteps === totalSteps;
+
+  // Estimate time remaining (rough: 5 min per step)
+  const remainingSteps = totalSteps - completedSteps;
+  const estimatedMinutes = remainingSteps * 5;
+
+  const totalXp =
+    track.totalXp ??
+    track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) +
+      (track.completionRewards?.xpBonus ?? 0);
+
+  return (
+    <div className="space-y-6">
+      {/* Welcome Banner */}
+      <Card className="overflow-hidden bg-gradient-to-r from-blue-500/10 via-violet-500/10 to-purple-500/10">
+        <CardContent className="p-8">
+          <div className="flex flex-col items-center gap-6 text-center md:flex-row md:text-left">
+            <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-violet-600 text-4xl shadow-lg">
+              {isComplete ? '🎉' : '🚀'}
+            </div>
+            <div className="flex-1">
+              <h1 className="text-2xl font-bold">{track.name}</h1>
+              <p className="text-muted-foreground mt-1 max-w-2xl">
+                {track.description}
+              </p>
+              {!isComplete && (
+                <p className="text-muted-foreground mt-3 text-sm">
+                  ⏱️ Estimated time:{' '}
+                  {estimatedMinutes > 0
+                    ? `~${estimatedMinutes} minutes`
+                    : 'Less than a minute'}
+                </p>
+              )}
+            </div>
+            {!isComplete && (
+              <Button size="lg" onClick={onStart}>
+                {completedSteps > 0 ? 'Continue' : 'Get Started'}
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Progress Overview */}
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-muted-foreground text-sm font-medium">
+              Progress
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">
+              {Math.round(percentComplete)}%
+            </div>
+            <Progress value={percentComplete} className="mt-2 h-2" />
+            <p className="text-muted-foreground mt-2 text-sm">
+              {completedSteps} of {totalSteps} steps completed
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-muted-foreground text-sm font-medium">
+              XP Earned
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold text-blue-500">
+              {progress.xpEarned}
+            </div>
+            <XpBar
+              current={progress.xpEarned}
+              max={totalXp}
+              showLabel={false}
+              size="sm"
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-muted-foreground text-sm font-medium">
+              Time Remaining
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">
+              {isComplete ? '✓' : `~${estimatedMinutes}m`}
+            </div>
+            <p className="text-muted-foreground mt-2 text-sm">
+              {isComplete ? 'All done!' : `${remainingSteps} steps to go`}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Step Preview */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span>📋</span>
+            <span>Your Journey</span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {track.steps.map((step, index) => {
+              const isStepCompleted = progress.completedStepIds.includes(
+                step.id
+              );
+              const isCurrent =
+                !isStepCompleted &&
+                track.steps
+                  .slice(0, index)
+                  .every((s) => progress.completedStepIds.includes(s.id));
+
+              return (
+                <div
+                  key={step.id}
+                  className="flex items-center gap-4 rounded-lg border p-3"
+                >
+                  <div
+                    className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-semibold ${
+                      isStepCompleted
+                        ? 'bg-green-500 text-white'
+                        : isCurrent
+                          ? 'bg-blue-500 text-white'
+                          : 'bg-muted text-muted-foreground'
+                    }`}
+                  >
+                    {isStepCompleted ? '✓' : index + 1}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p
+                      className={`font-medium ${
+                        isStepCompleted
+                          ? 'text-green-500'
+                          : isCurrent
+                            ? 'text-foreground'
+                            : 'text-muted-foreground'
+                      }`}
+                    >
+                      {step.title}
+                    </p>
+                  </div>
+                  {step.xpReward && (
+                    <span className="text-muted-foreground text-sm">
+                      +{step.xpReward} XP
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Completion Message */}
+      {isComplete && (
+        <Card className="border-green-500/50 bg-green-500/5">
+          <CardContent className="flex items-center gap-4 p-6">
+            <div className="text-4xl">🎉</div>
+            <div>
+              <h3 className="text-lg font-semibold text-green-500">
+                Onboarding Complete!
+              </h3>
+              <p className="text-muted-foreground">
+                You've completed all {totalSteps} steps. Welcome aboard!
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

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"
+  }
+}
+