@contractspec/example.learning-journey-ui-coaching 3.7.6 → 3.7.7

package/src/views/Progress.tsx

@@ -1,164 +1,164 @@
 'use client';
 
+import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from '@contractspec/lib.ui-kit-web/ui/card';
-import {
-  XpBar,
-  BadgeDisplay,
-  StreakCounter,
+	BadgeDisplay,
+	StreakCounter,
+	XpBar,
 } from '@contractspec/example.learning-journey-ui-shared';
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from '@contractspec/lib.ui-kit-web/ui/card';
 import { EngagementMeter } from '../components/EngagementMeter';
-import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
 
 export function ProgressView({ track, progress }: LearningViewProps) {
-  const totalXp =
-    track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0);
+	const totalXp =
+		track.totalXp ?? track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0);
 
-  const completedSteps = progress.completedStepIds.length;
-  const totalSteps = track.steps.length;
-  const pendingSteps = totalSteps - completedSteps;
+	const completedSteps = progress.completedStepIds.length;
+	const totalSteps = track.steps.length;
+	const pendingSteps = totalSteps - completedSteps;
 
-  // For demo: split completed into "actioned" and "acknowledged"
-  // In real app, this would come from progress data
-  const actioned = Math.floor(completedSteps * 0.7);
-  const acknowledged = completedSteps - actioned;
+	// For demo: split completed into "actioned" and "acknowledged"
+	// In real app, this would come from progress data
+	const actioned = Math.floor(completedSteps * 0.7);
+	const acknowledged = completedSteps - actioned;
 
-  return (
-    <div className="space-y-6">
-      {/* Engagement Overview */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <span>📊</span>
-            <span>Engagement Overview</span>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <EngagementMeter
-            actioned={actioned}
-            acknowledged={acknowledged}
-            pending={pendingSteps}
-            streak={progress.streakDays}
-          />
-        </CardContent>
-      </Card>
+	return (
+		<div className="space-y-6">
+			{/* Engagement Overview */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						<span>📊</span>
+						<span>Engagement Overview</span>
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<EngagementMeter
+						actioned={actioned}
+						acknowledged={acknowledged}
+						pending={pendingSteps}
+						streak={progress.streakDays}
+					/>
+				</CardContent>
+			</Card>
 
-      {/* Stats Grid */}
-      <div className="grid gap-4 md:grid-cols-2">
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-muted-foreground text-sm font-medium">
-              XP Earned
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            <div className="flex items-baseline gap-2">
-              <span className="text-3xl font-bold text-orange-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>
+			{/* Stats Grid */}
+			<div className="grid gap-4 md:grid-cols-2">
+				<Card>
+					<CardHeader className="pb-2">
+						<CardTitle className="font-medium text-muted-foreground text-sm">
+							XP Earned
+						</CardTitle>
+					</CardHeader>
+					<CardContent className="space-y-3">
+						<div className="flex items-baseline gap-2">
+							<span className="font-bold text-3xl text-orange-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>
 
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-muted-foreground text-sm font-medium">
-              Engagement Streak
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex items-center gap-4">
-              <StreakCounter days={progress.streakDays} size="lg" />
-              <div className="text-muted-foreground text-sm">
-                {progress.streakDays > 0
-                  ? 'Keep going!'
-                  : 'Start your streak today!'}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+				<Card>
+					<CardHeader className="pb-2">
+						<CardTitle className="font-medium text-muted-foreground text-sm">
+							Engagement Streak
+						</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="flex items-center gap-4">
+							<StreakCounter days={progress.streakDays} size="lg" />
+							<div className="text-muted-foreground text-sm">
+								{progress.streakDays > 0
+									? 'Keep going!'
+									: 'Start your streak today!'}
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
 
-      {/* Achievements */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <span>🏅</span>
-            <span>Achievements</span>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <BadgeDisplay badges={progress.badges} size="lg" maxVisible={10} />
-          {progress.badges.length === 0 && (
-            <p className="text-muted-foreground text-sm">
-              Action tips to unlock achievements!
-            </p>
-          )}
-        </CardContent>
-      </Card>
+			{/* Achievements */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						<span>🏅</span>
+						<span>Achievements</span>
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<BadgeDisplay badges={progress.badges} size="lg" maxVisible={10} />
+					{progress.badges.length === 0 && (
+						<p className="text-muted-foreground text-sm">
+							Action tips to unlock achievements!
+						</p>
+					)}
+				</CardContent>
+			</Card>
 
-      {/* Tip Breakdown */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <span>💡</span>
-            <span>Tip Status</span>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-3">
-            {track.steps.map((step) => {
-              const isCompleted = progress.completedStepIds.includes(step.id);
+			{/* Tip Breakdown */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						<span>💡</span>
+						<span>Tip Status</span>
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<div className="space-y-3">
+						{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-amber-500'
-                      }
-                    >
-                      {isCompleted ? '✓' : '○'}
-                    </span>
-                    <span
-                      className={
-                        isCompleted
-                          ? 'text-muted-foreground'
-                          : 'text-foreground'
-                      }
-                    >
-                      {step.title}
-                    </span>
-                  </div>
-                  <span
-                    className={`text-sm ${
-                      isCompleted ? 'text-green-500' : 'text-muted-foreground'
-                    }`}
-                  >
-                    {isCompleted ? 'Actioned' : 'Pending'}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
+							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-amber-500'
+											}
+										>
+											{isCompleted ? '✓' : '○'}
+										</span>
+										<span
+											className={
+												isCompleted
+													? 'text-muted-foreground'
+													: 'text-foreground'
+											}
+										>
+											{step.title}
+										</span>
+									</div>
+									<span
+										className={`text-sm ${
+											isCompleted ? 'text-green-500' : 'text-muted-foreground'
+										}`}
+									>
+										{isCompleted ? 'Actioned' : 'Pending'}
+									</span>
+								</div>
+							);
+						})}
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
 }
 
 export { ProgressView as Progress };

package/src/views/Steps.tsx

@@ -1,63 +1,63 @@
 'use client';
 
-import { TipCard } from '../components/TipCard';
 import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
+import { TipCard } from '../components/TipCard';
 
 export function Steps({ track, progress, onStepComplete }: LearningViewProps) {
-  const completedSteps = progress.completedStepIds.length;
-  const totalSteps = track.steps.length;
-
-  // Sort: pending first, then completed
-  const sortedSteps = [...track.steps].sort((a, b) => {
-    const aCompleted = progress.completedStepIds.includes(a.id);
-    const bCompleted = progress.completedStepIds.includes(b.id);
-    if (aCompleted === bCompleted) return 0;
-    return aCompleted ? 1 : -1;
-  });
-
-  const currentStepId = track.steps.find(
-    (s) => !progress.completedStepIds.includes(s.id)
-  )?.id;
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="text-center">
-        <h2 className="text-xl font-bold">Coaching Tips</h2>
-        <p className="text-muted-foreground">
-          Review and take action on personalized tips
-        </p>
-        <p className="text-muted-foreground mt-2 text-sm">
-          {completedSteps} of {totalSteps} tips actioned
-        </p>
-      </div>
-
-      {/* Tips Stack */}
-      <div className="space-y-3">
-        {sortedSteps.map((step) => {
-          const isCompleted = progress.completedStepIds.includes(step.id);
-          const isCurrent = step.id === currentStepId;
-
-          return (
-            <TipCard
-              key={step.id}
-              step={step}
-              isCompleted={isCompleted}
-              isCurrent={isCurrent}
-              onComplete={() => onStepComplete?.(step.id)}
-              onDismiss={() => onStepComplete?.(step.id)} // Dismiss also completes
-            />
-          );
-        })}
-      </div>
-
-      {/* All done */}
-      {completedSteps === totalSteps && (
-        <div className="text-muted-foreground text-center">
-          <span className="text-2xl">✨</span>
-          <p className="mt-2">All tips have been addressed!</p>
-        </div>
-      )}
-    </div>
-  );
+	const completedSteps = progress.completedStepIds.length;
+	const totalSteps = track.steps.length;
+
+	// Sort: pending first, then completed
+	const sortedSteps = [...track.steps].sort((a, b) => {
+		const aCompleted = progress.completedStepIds.includes(a.id);
+		const bCompleted = progress.completedStepIds.includes(b.id);
+		if (aCompleted === bCompleted) return 0;
+		return aCompleted ? 1 : -1;
+	});
+
+	const currentStepId = track.steps.find(
+		(s) => !progress.completedStepIds.includes(s.id)
+	)?.id;
+
+	return (
+		<div className="space-y-6">
+			{/* Header */}
+			<div className="text-center">
+				<h2 className="font-bold text-xl">Coaching Tips</h2>
+				<p className="text-muted-foreground">
+					Review and take action on personalized tips
+				</p>
+				<p className="mt-2 text-muted-foreground text-sm">
+					{completedSteps} of {totalSteps} tips actioned
+				</p>
+			</div>
+
+			{/* Tips Stack */}
+			<div className="space-y-3">
+				{sortedSteps.map((step) => {
+					const isCompleted = progress.completedStepIds.includes(step.id);
+					const isCurrent = step.id === currentStepId;
+
+					return (
+						<TipCard
+							key={step.id}
+							step={step}
+							isCompleted={isCompleted}
+							isCurrent={isCurrent}
+							onComplete={() => onStepComplete?.(step.id)}
+							onDismiss={() => onStepComplete?.(step.id)} // Dismiss also completes
+						/>
+					);
+				})}
+			</div>
+
+			{/* All done */}
+			{completedSteps === totalSteps && (
+				<div className="text-center text-muted-foreground">
+					<span className="text-2xl">✨</span>
+					<p className="mt-2">All tips have been addressed!</p>
+				</div>
+			)}
+		</div>
+	);
 }

package/src/views/Timeline.tsx

@@ -1,114 +1,114 @@
 'use client';
 
+import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
 } from '@contractspec/lib.ui-kit-web/ui/card';
 import { TipFeed } from '../components/TipFeed';
-import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
 
 export function Timeline({ track, progress }: LearningViewProps) {
-  // Create feed items sorted by completion status (completed first for "recent activity")
-  const feedItems = track.steps
-    .map((step) => ({
-      step,
-      isCompleted: progress.completedStepIds.includes(step.id),
-      completedAt: progress.completedStepIds.includes(step.id)
-        ? 'Recently'
-        : undefined,
-    }))
-    .sort((a, b) => {
-      // Completed items first (as recent activity)
-      if (a.isCompleted && !b.isCompleted) return -1;
-      if (!a.isCompleted && b.isCompleted) return 1;
-      return 0;
-    });
+	// Create feed items sorted by completion status (completed first for "recent activity")
+	const feedItems = track.steps
+		.map((step) => ({
+			step,
+			isCompleted: progress.completedStepIds.includes(step.id),
+			completedAt: progress.completedStepIds.includes(step.id)
+				? 'Recently'
+				: undefined,
+		}))
+		.sort((a, b) => {
+			// Completed items first (as recent activity)
+			if (a.isCompleted && !b.isCompleted) return -1;
+			if (!a.isCompleted && b.isCompleted) return 1;
+			return 0;
+		});
 
-  const completedCount = feedItems.filter((f) => f.isCompleted).length;
-  const pendingCount = feedItems.length - completedCount;
+	const completedCount = feedItems.filter((f) => f.isCompleted).length;
+	const pendingCount = feedItems.length - completedCount;
 
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="text-center">
-        <h2 className="text-xl font-bold">Activity Timeline</h2>
-        <p className="text-muted-foreground">
-          Your coaching journey and tip history
-        </p>
-      </div>
+	return (
+		<div className="space-y-6">
+			{/* Header */}
+			<div className="text-center">
+				<h2 className="font-bold text-xl">Activity Timeline</h2>
+				<p className="text-muted-foreground">
+					Your coaching journey and tip history
+				</p>
+			</div>
 
-      {/* Summary */}
-      <div className="grid grid-cols-2 gap-4">
-        <Card>
-          <CardContent className="p-4 text-center">
-            <div className="text-2xl font-bold text-green-500">
-              {completedCount}
-            </div>
-            <div className="text-muted-foreground text-sm">Tips Actioned</div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="p-4 text-center">
-            <div className="text-2xl font-bold text-amber-500">
-              {pendingCount}
-            </div>
-            <div className="text-muted-foreground text-sm">Tips Pending</div>
-          </CardContent>
-        </Card>
-      </div>
+			{/* Summary */}
+			<div className="grid grid-cols-2 gap-4">
+				<Card>
+					<CardContent className="p-4 text-center">
+						<div className="font-bold text-2xl text-green-500">
+							{completedCount}
+						</div>
+						<div className="text-muted-foreground text-sm">Tips Actioned</div>
+					</CardContent>
+				</Card>
+				<Card>
+					<CardContent className="p-4 text-center">
+						<div className="font-bold text-2xl text-amber-500">
+							{pendingCount}
+						</div>
+						<div className="text-muted-foreground text-sm">Tips Pending</div>
+					</CardContent>
+				</Card>
+			</div>
 
-      {/* Activity Feed */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <span>📝</span>
-            <span>Coaching Feed</span>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <TipFeed items={feedItems} />
-        </CardContent>
-      </Card>
+			{/* Activity Feed */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						<span>📝</span>
+						<span>Coaching Feed</span>
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<TipFeed items={feedItems} />
+				</CardContent>
+			</Card>
 
-      {/* Journey Stats */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <span>📈</span>
-            <span>Journey Stats</span>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">Total Tips</span>
-              <span className="font-semibold">{track.steps.length}</span>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">Completed</span>
-              <span className="font-semibold text-green-500">
-                {completedCount}
-              </span>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">XP Earned</span>
-              <span className="font-semibold text-orange-500">
-                {progress.xpEarned}
-              </span>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">Current Streak</span>
-              <span className="font-semibold">
-                {progress.streakDays > 0
-                  ? `🔥 ${progress.streakDays} days`
-                  : 'Start today!'}
-              </span>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
+			{/* Journey Stats */}
+			<Card>
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						<span>📈</span>
+						<span>Journey Stats</span>
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<div className="space-y-4">
+						<div className="flex items-center justify-between">
+							<span className="text-muted-foreground">Total Tips</span>
+							<span className="font-semibold">{track.steps.length}</span>
+						</div>
+						<div className="flex items-center justify-between">
+							<span className="text-muted-foreground">Completed</span>
+							<span className="font-semibold text-green-500">
+								{completedCount}
+							</span>
+						</div>
+						<div className="flex items-center justify-between">
+							<span className="text-muted-foreground">XP Earned</span>
+							<span className="font-semibold text-orange-500">
+								{progress.xpEarned}
+							</span>
+						</div>
+						<div className="flex items-center justify-between">
+							<span className="text-muted-foreground">Current Streak</span>
+							<span className="font-semibold">
+								{progress.streakDays > 0
+									? `🔥 ${progress.streakDays} days`
+									: 'Start today!'}
+							</span>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
 }

package/src/views/index.ts

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