@contractspec/example.learning-journey-ui-gamified 3.7.6 → 3.7.10

package/src/docs/learning-journey-ui-gamified.docblock.ts

@@ -2,17 +2,17 @@ import type { DocBlock } from '@contractspec/lib.contracts-spec/docs';
 import { registerDocBlocks } from '@contractspec/lib.contracts-spec/docs';
 
 const blocks: DocBlock[] = [
-  {
-    id: 'docs.examples.learning-journey-ui-gamified',
-    title: 'Learning Journey UI — Gamified',
-    summary:
-      'UI mini-app components for gamified learning: flashcards, mastery, streak/calendar.',
-    kind: 'reference',
-    visibility: 'public',
-    route: '/docs/examples/learning-journey-ui-gamified',
-    tags: ['learning', 'ui', 'gamified'],
-    body: `## Includes\n- Gamified mini-app shell\n- Views: overview, steps, progress, timeline\n- Components: flash card, mastery ring, day calendar\n\n## Notes\n- Compose with design system components.\n- Respect prefers-reduced-motion; keep tap targets large.`,
-  },
+	{
+		id: 'docs.examples.learning-journey-ui-gamified',
+		title: 'Learning Journey UI — Gamified',
+		summary:
+			'UI mini-app components for gamified learning: flashcards, mastery, streak/calendar.',
+		kind: 'reference',
+		visibility: 'public',
+		route: '/docs/examples/learning-journey-ui-gamified',
+		tags: ['learning', 'ui', 'gamified'],
+		body: `## Includes\n- Gamified mini-app shell\n- Views: overview, steps, progress, timeline\n- Components: flash card, mastery ring, day calendar\n\n## Notes\n- Compose with design system components.\n- Respect prefers-reduced-motion; keep tap targets large.`,
+	},
 ];
 
 registerDocBlocks(blocks);

package/src/example.ts

@@ -1,31 +1,31 @@
 import { defineExample } from '@contractspec/lib.contracts-spec';
 
 const example = defineExample({
-  meta: {
-    key: 'learning-journey-ui-gamified',
-    version: '1.0.0',
-    title: 'Learning Journey UI — Gamified',
-    description:
-      'UI mini-app for gamified learning: flashcards, mastery ring, calendar.',
-    kind: 'ui',
-    visibility: 'public',
-    stability: 'experimental',
-    owners: ['@platform.core'],
-    tags: ['learning', 'ui', 'gamified'],
-  },
-  docs: {
-    rootDocId: 'docs.examples.learning-journey-ui-gamified',
-  },
-  entrypoints: {
-    packageName: '@contractspec/example.learning-journey-ui-gamified',
-    docs: './docs',
-  },
-  surfaces: {
-    templates: true,
-    sandbox: { enabled: true, modes: ['playground', 'markdown'] },
-    studio: { enabled: true, installable: true },
-    mcp: { enabled: true },
-  },
+	meta: {
+		key: 'learning-journey-ui-gamified',
+		version: '1.0.0',
+		title: 'Learning Journey UI — Gamified',
+		description:
+			'UI mini-app for gamified learning: flashcards, mastery ring, calendar.',
+		kind: 'ui',
+		visibility: 'public',
+		stability: 'experimental',
+		owners: ['@platform.core'],
+		tags: ['learning', 'ui', 'gamified'],
+	},
+	docs: {
+		rootDocId: 'docs.examples.learning-journey-ui-gamified',
+	},
+	entrypoints: {
+		packageName: '@contractspec/example.learning-journey-ui-gamified',
+		docs: './docs',
+	},
+	surfaces: {
+		templates: true,
+		sandbox: { enabled: true, modes: ['playground', 'markdown'] },
+		studio: { enabled: true, installable: true },
+		mcp: { enabled: true },
+	},
 });
 
 export default example;

package/src/index.ts

@@ -1,11 +1,10 @@
 // Main mini-app
-export { GamifiedMiniApp } from './GamifiedMiniApp';
-
-// Views
-export { Overview, Steps, Progress, Timeline } from './views';
 
 // Components
-export { FlashCard, MasteryRing, DayCalendar } from './components';
-export * from './learning-journey-ui-gamified.feature';
+export { DayCalendar, FlashCard, MasteryRing } from './components';
 export { default as example } from './example';
+export { GamifiedMiniApp } from './GamifiedMiniApp';
+export * from './learning-journey-ui-gamified.feature';
+// Views
+export { Overview, Progress, Steps, Timeline } from './views';
 import './docs';

package/src/learning-journey-ui-gamified.feature.ts

@@ -1,17 +1,17 @@
 import { defineFeature } from '@contractspec/lib.contracts-spec';
 
 export const LearningJourneyUiGamifiedFeature = defineFeature({
-  meta: {
-    key: 'learning-journey-ui-gamified',
-    version: '1.0.0',
-    title: 'Learning Journey UI: Gamified',
-    description:
-      'Gamified learning UI with drills, quests, flash cards, and mastery rings',
-    domain: 'learning-journey',
-    owners: ['@examples'],
-    tags: ['learning', 'ui', 'gamified', 'drills'],
-    stability: 'experimental',
-  },
+	meta: {
+		key: 'learning-journey-ui-gamified',
+		version: '1.0.0',
+		title: 'Learning Journey UI: Gamified',
+		description:
+			'Gamified learning UI with drills, quests, flash cards, and mastery rings',
+		domain: 'learning-journey',
+		owners: ['@examples'],
+		tags: ['learning', 'ui', 'gamified', 'drills'],
+		stability: 'experimental',
+	},
 
-  docs: ['docs.examples.learning-journey-ui-gamified'],
+	docs: ['docs.examples.learning-journey-ui-gamified'],
 });

package/src/views/Overview.tsx

@@ -1,164 +1,164 @@
 'use client';
 
+import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
+import {
+	BadgeDisplay,
+	StreakCounter,
+	XpBar,
+} from '@contractspec/example.learning-journey-ui-shared';
 import { Button } from '@contractspec/lib.design-system';
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
 } from '@contractspec/lib.ui-kit-web/ui/card';
-import {
-  XpBar,
-  StreakCounter,
-  BadgeDisplay,
-} from '@contractspec/example.learning-journey-ui-shared';
-import type { LearningViewProps } from '@contractspec/example.learning-journey-ui-shared';
 
 interface GamifiedOverviewProps extends LearningViewProps {
-  onStart?: () => void;
+	onStart?: () => void;
 }
 
 export function Overview({ track, progress, onStart }: GamifiedOverviewProps) {
-  const totalXp =
-    track.totalXp ??
-    track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) +
-      (track.completionRewards?.xpBonus ?? 0);
+	const totalXp =
+		track.totalXp ??
+		track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) +
+			(track.completionRewards?.xpBonus ?? 0);
 
-  const completedSteps = progress.completedStepIds.length;
-  const totalSteps = track.steps.length;
-  const isComplete = completedSteps === totalSteps;
+	const completedSteps = progress.completedStepIds.length;
+	const totalSteps = track.steps.length;
+	const isComplete = completedSteps === totalSteps;
 
-  return (
-    <div className="space-y-6">
-      {/* Hero Card */}
-      <Card className="overflow-hidden bg-gradient-to-br from-violet-500/10 via-purple-500/10 to-fuchsia-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-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 to-purple-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">{track.description}</p>
-            </div>
-            <div className="flex items-center gap-3">
-              <StreakCounter days={progress.streakDays} size="lg" />
-            </div>
-          </div>
-        </CardContent>
-      </Card>
+	return (
+		<div className="space-y-6">
+			{/* Hero Card */}
+			<Card className="overflow-hidden bg-gradient-to-br from-violet-500/10 via-purple-500/10 to-fuchsia-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-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 to-purple-600 text-4xl shadow-lg">
+							{isComplete ? '🏆' : '🎯'}
+						</div>
+						<div className="flex-1">
+							<h1 className="font-bold text-2xl">{track.name}</h1>
+							<p className="mt-1 text-muted-foreground">{track.description}</p>
+						</div>
+						<div className="flex items-center gap-3">
+							<StreakCounter days={progress.streakDays} size="lg" />
+						</div>
+					</div>
+				</CardContent>
+			</Card>
 
-      {/* Stats Grid */}
-      <div className="grid gap-4 md:grid-cols-3">
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-muted-foreground text-sm font-medium">
-              XP Progress
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-3xl font-bold text-violet-500">
-              {progress.xpEarned.toLocaleString()}
-            </div>
-            <XpBar
-              current={progress.xpEarned}
-              max={totalXp}
-              showLabel={false}
-              size="sm"
-            />
-          </CardContent>
-        </Card>
+			{/* Stats Grid */}
+			<div className="grid gap-4 md:grid-cols-3">
+				<Card>
+					<CardHeader className="pb-2">
+						<CardTitle className="font-medium text-muted-foreground text-sm">
+							XP Progress
+						</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="font-bold text-3xl text-violet-500">
+							{progress.xpEarned.toLocaleString()}
+						</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">
-              Steps Completed
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-3xl font-bold">
-              {completedSteps}{' '}
-              <span className="text-muted-foreground text-lg">
-                / {totalSteps}
-              </span>
-            </div>
-            <div className="bg-muted mt-2 h-2 w-full overflow-hidden rounded-full">
-              <div
-                className="h-full bg-green-500 transition-all duration-500"
-                style={{ width: `${(completedSteps / totalSteps) * 100}%` }}
-              />
-            </div>
-          </CardContent>
-        </Card>
+				<Card>
+					<CardHeader className="pb-2">
+						<CardTitle className="font-medium text-muted-foreground text-sm">
+							Steps Completed
+						</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="font-bold text-3xl">
+							{completedSteps}{' '}
+							<span className="text-lg text-muted-foreground">
+								/ {totalSteps}
+							</span>
+						</div>
+						<div className="mt-2 h-2 w-full overflow-hidden rounded-full bg-muted">
+							<div
+								className="h-full bg-green-500 transition-all duration-500"
+								style={{ width: `${(completedSteps / totalSteps) * 100}%` }}
+							/>
+						</div>
+					</CardContent>
+				</Card>
 
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-muted-foreground text-sm font-medium">
-              Badges Earned
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <BadgeDisplay badges={progress.badges} size="lg" />
-          </CardContent>
-        </Card>
-      </div>
+				<Card>
+					<CardHeader className="pb-2">
+						<CardTitle className="font-medium text-muted-foreground text-sm">
+							Badges Earned
+						</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<BadgeDisplay badges={progress.badges} size="lg" />
+					</CardContent>
+				</Card>
+			</div>
 
-      {/* Next Step Preview */}
-      {!isComplete && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <span>🎯</span>
-              <span>Next Challenge</span>
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            {(() => {
-              const nextStep = track.steps.find(
-                (s) => !progress.completedStepIds.includes(s.id)
-              );
-              if (!nextStep) return null;
+			{/* Next Step Preview */}
+			{!isComplete && (
+				<Card>
+					<CardHeader>
+						<CardTitle className="flex items-center gap-2">
+							<span>🎯</span>
+							<span>Next Challenge</span>
+						</CardTitle>
+					</CardHeader>
+					<CardContent>
+						{(() => {
+							const nextStep = track.steps.find(
+								(s) => !progress.completedStepIds.includes(s.id)
+							);
+							if (!nextStep) return null;
 
-              return (
-                <div className="flex items-center justify-between gap-4">
-                  <div>
-                    <h3 className="font-semibold">{nextStep.title}</h3>
-                    <p className="text-muted-foreground text-sm">
-                      {nextStep.description}
-                    </p>
-                  </div>
-                  <div className="flex items-center gap-3">
-                    {nextStep.xpReward && (
-                      <span className="rounded-full bg-green-500/10 px-3 py-1 text-sm font-semibold text-green-500">
-                        +{nextStep.xpReward} XP
-                      </span>
-                    )}
-                    <Button onClick={onStart}>Start</Button>
-                  </div>
-                </div>
-              );
-            })()}
-          </CardContent>
-        </Card>
-      )}
+							return (
+								<div className="flex items-center justify-between gap-4">
+									<div>
+										<h3 className="font-semibold">{nextStep.title}</h3>
+										<p className="text-muted-foreground text-sm">
+											{nextStep.description}
+										</p>
+									</div>
+									<div className="flex items-center gap-3">
+										{nextStep.xpReward && (
+											<span className="rounded-full bg-green-500/10 px-3 py-1 font-semibold text-green-500 text-sm">
+												+{nextStep.xpReward} XP
+											</span>
+										)}
+										<Button onClick={onStart}>Start</Button>
+									</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">
-                Track Complete!
-              </h3>
-              <p className="text-muted-foreground">
-                You've mastered all {totalSteps} challenges and earned{' '}
-                {progress.xpEarned} XP.
-              </p>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-    </div>
-  );
+			{/* 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="font-semibold text-green-500 text-lg">
+								Track Complete!
+							</h3>
+							<p className="text-muted-foreground">
+								You've mastered all {totalSteps} challenges and earned{' '}
+								{progress.xpEarned} XP.
+							</p>
+						</div>
+					</CardContent>
+				</Card>
+			)}
+		</div>
+	);
 }