@lssm/example.learning-journey-ui-onboarding 0.0.0-canary-20251212210835

package/src/views/Steps.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { useState } from 'react';
+import { Progress } from '@lssm/lib.ui-kit-web/ui/progress';
+import { StepChecklist } from '../components/StepChecklist';
+import type { LearningViewProps } from '@lssm/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,142 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@lssm/lib.ui-kit-web/ui/card';
+import { JourneyMap } from '../components/JourneyMap';
+import type { LearningViewProps } from '@lssm/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,5 @@
+export { Overview } from './Overview';
+export { Steps } from './Steps';
+export { Progress } from './Progress';
+export { Timeline } from './Timeline';
+

package/tsconfig.json

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