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

package/src/views/Overview.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { Button } from '@contractspec/lib.design-system';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@contractspec/lib.ui-kit-web/ui/card';
+import {
+  XpBar,
+  StreakCounter,
+} from '@contractspec/example.learning-journey-ui-shared';
+import { TipCard } from '../components/TipCard';
+import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
+
+interface CoachingOverviewProps extends LearningViewProps {
+  onStart?: () => void;
+}
+
+export function Overview({
+  track,
+  progress,
+  onStepComplete,
+  onStart,
+}: CoachingOverviewProps) {
+  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;
+
+  // Get active tips (incomplete ones)
+  const activeTips = track.steps
+    .filter((s) => !progress.completedStepIds.includes(s.id))
+    .slice(0, 3);
+
+  return (
+    <div className="space-y-6">
+      {/* Header Card */}
+      <Card className="overflow-hidden bg-gradient-to-br from-amber-500/10 via-orange-500/10 to-red-500/10">
+        <CardContent className="p-6">
+          <div className="flex flex-col items-center gap-4 text-center md:flex-row md:text-left">
+            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 text-3xl shadow-lg">
+              💡
+            </div>
+            <div className="flex-1">
+              <h1 className="text-2xl font-bold">{track.name}</h1>
+              <p className="text-muted-foreground mt-1">{track.description}</p>
+            </div>
+            <div className="flex items-center gap-4">
+              <StreakCounter days={progress.streakDays} size="lg" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Quick Stats */}
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-muted-foreground text-sm font-medium">
+              Active Tips
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold text-amber-500">
+              {pendingSteps}
+            </div>
+            <p className="text-muted-foreground text-sm">tips for you today</p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-muted-foreground text-sm font-medium">
+              Tips Actioned
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold text-green-500">
+              {completedSteps}
+            </div>
+            <p className="text-muted-foreground text-sm">
+              out of {totalSteps} total
+            </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-orange-500">
+              {progress.xpEarned}
+            </div>
+            <XpBar
+              current={progress.xpEarned}
+              max={totalXp}
+              showLabel={false}
+              size="sm"
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Active Tips Preview */}
+      {activeTips.length > 0 && (
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle className="flex items-center gap-2">
+              <span>💡</span>
+              <span>Tips for You</span>
+            </CardTitle>
+            {activeTips.length < pendingSteps && (
+              <Button variant="outline" size="sm" onClick={onStart}>
+                View All ({pendingSteps})
+              </Button>
+            )}
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {activeTips.map((step) => (
+              <TipCard
+                key={step.id}
+                step={step}
+                isCompleted={false}
+                isCurrent={step.id === activeTips[0]?.id}
+                onComplete={() => onStepComplete?.(step.id)}
+              />
+            ))}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* All Complete */}
+      {pendingSteps === 0 && (
+        <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">
+                All Tips Actioned!
+              </h3>
+              <p className="text-muted-foreground">
+                Great job! You've addressed all {totalSteps} coaching tips.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

package/src/views/Progress.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@contractspec/lib.ui-kit-web/ui/card';
+import {
+  XpBar,
+  BadgeDisplay,
+  StreakCounter,
+} from '@contractspec/example.learning-journey-ui-shared';
+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 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;
+
+  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>
+
+        <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>
+
+      {/* 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);
+
+              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

@@ -0,0 +1,63 @@
+'use client';
+
+import { TipCard } from '../components/TipCard';
+import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
+
+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>
+  );
+}

package/src/views/Timeline.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import {
+  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;
+    });
+
+  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>
+
+      {/* 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>
+
+      {/* 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>
+  );
+}

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