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

package/src/components/StepChecklist.tsx

@@ -5,132 +5,132 @@ import { cn } from '@contractspec/lib.ui-kit-core';
 import type { LearningJourneyStepSpec } from '@contractspec/module.learning-journey/track-spec';
 
 interface StepChecklistProps {
-  step: LearningJourneyStepSpec;
-  stepNumber: number;
-  isCompleted: boolean;
-  isCurrent: boolean;
-  isExpanded: boolean;
-  onToggle: () => void;
-  onComplete?: () => void;
+	step: LearningJourneyStepSpec;
+	stepNumber: number;
+	isCompleted: boolean;
+	isCurrent: boolean;
+	isExpanded: boolean;
+	onToggle: () => void;
+	onComplete?: () => void;
 }
 
 export function StepChecklist({
-  step,
-  stepNumber,
-  isCompleted,
-  isCurrent,
-  isExpanded,
-  onToggle,
-  onComplete,
+	step,
+	stepNumber,
+	isCompleted,
+	isCurrent,
+	isExpanded,
+	onToggle,
+	onComplete,
 }: StepChecklistProps) {
-  return (
-    <div
-      className={cn(
-        'rounded-xl border transition-all',
-        isCompleted && 'border-green-500/50 bg-green-500/5',
-        isCurrent && !isCompleted && 'border-violet-500 bg-violet-500/5',
-        !isCompleted && !isCurrent && 'border-border'
-      )}
-    >
-      {/* Header */}
-      <button
-        type="button"
-        className="flex w-full items-center gap-4 p-4 text-left"
-        onClick={onToggle}
-      >
-        {/* Checkbox/Number */}
-        <div
-          className={cn(
-            'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors',
-            isCompleted && 'border-green-500 bg-green-500 text-white',
-            isCurrent && !isCompleted && 'border-violet-500 text-violet-500',
-            !isCompleted &&
-              !isCurrent &&
-              'border-muted-foreground text-muted-foreground'
-          )}
-        >
-          {isCompleted ? '✓' : stepNumber}
-        </div>
+	return (
+		<div
+			className={cn(
+				'rounded-xl border transition-all',
+				isCompleted && 'border-green-500/50 bg-green-500/5',
+				isCurrent && !isCompleted && 'border-violet-500 bg-violet-500/5',
+				!isCompleted && !isCurrent && 'border-border'
+			)}
+		>
+			{/* Header */}
+			<button
+				type="button"
+				className="flex w-full items-center gap-4 p-4 text-left"
+				onClick={onToggle}
+			>
+				{/* Checkbox/Number */}
+				<div
+					className={cn(
+						'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors',
+						isCompleted && 'border-green-500 bg-green-500 text-white',
+						isCurrent && !isCompleted && 'border-violet-500 text-violet-500',
+						!isCompleted &&
+							!isCurrent &&
+							'border-muted-foreground text-muted-foreground'
+					)}
+				>
+					{isCompleted ? '✓' : stepNumber}
+				</div>
 
-        {/* Title & Description */}
-        <div className="min-w-0 flex-1">
-          <h4
-            className={cn(
-              'font-semibold',
-              isCompleted && 'text-green-500',
-              isCurrent && !isCompleted && 'text-foreground',
-              !isCompleted && !isCurrent && 'text-muted-foreground'
-            )}
-          >
-            {step.title}
-          </h4>
-          {!isExpanded && step.description && (
-            <p className="text-muted-foreground truncate text-sm">
-              {step.description}
-            </p>
-          )}
-        </div>
+				{/* Title & Description */}
+				<div className="min-w-0 flex-1">
+					<h4
+						className={cn(
+							'font-semibold',
+							isCompleted && 'text-green-500',
+							isCurrent && !isCompleted && 'text-foreground',
+							!isCompleted && !isCurrent && 'text-muted-foreground'
+						)}
+					>
+						{step.title}
+					</h4>
+					{!isExpanded && step.description && (
+						<p className="truncate text-muted-foreground text-sm">
+							{step.description}
+						</p>
+					)}
+				</div>
 
-        {/* XP Badge */}
-        {step.xpReward && (
-          <span
-            className={cn(
-              '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>
-        )}
+				{/* XP Badge */}
+				{step.xpReward && (
+					<span
+						className={cn(
+							'shrink-0 rounded-full px-2 py-1 font-semibold text-xs',
+							isCompleted
+								? 'bg-green-500/10 text-green-500'
+								: 'bg-muted text-muted-foreground'
+						)}
+					>
+						+{step.xpReward} XP
+					</span>
+				)}
 
-        {/* Expand indicator */}
-        <span
-          className={cn(
-            'shrink-0 transition-transform',
-            isExpanded && 'rotate-180'
-          )}
-        >
-          ▼
-        </span>
-      </button>
+				{/* Expand indicator */}
+				<span
+					className={cn(
+						'shrink-0 transition-transform',
+						isExpanded && 'rotate-180'
+					)}
+				>
+					▼
+				</span>
+			</button>
 
-      {/* Expanded Content */}
-      {isExpanded && (
-        <div className="border-t px-4 py-4">
-          {step.description && (
-            <p className="text-muted-foreground mb-4">{step.description}</p>
-          )}
+			{/* Expanded Content */}
+			{isExpanded && (
+				<div className="border-t px-4 py-4">
+					{step.description && (
+						<p className="mb-4 text-muted-foreground">{step.description}</p>
+					)}
 
-          {step.instructions && (
-            <div className="bg-muted mb-4 rounded-lg p-4">
-              <p className="mb-2 text-sm font-medium">Instructions:</p>
-              <p className="text-muted-foreground text-sm">
-                {step.instructions}
-              </p>
-            </div>
-          )}
+					{step.instructions && (
+						<div className="mb-4 rounded-lg bg-muted p-4">
+							<p className="mb-2 font-medium text-sm">Instructions:</p>
+							<p className="text-muted-foreground text-sm">
+								{step.instructions}
+							</p>
+						</div>
+					)}
 
-          {/* Action buttons */}
-          <div className="flex flex-wrap gap-2">
-            {step.actionUrl && (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => window.open(step.actionUrl, '_blank')}
-              >
-                {step.actionLabel ?? 'Try it'}
-              </Button>
-            )}
-            {!isCompleted && (
-              <Button size="sm" onClick={onComplete}>
-                Mark as Complete
-              </Button>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
+					{/* Action buttons */}
+					<div className="flex flex-wrap gap-2">
+						{step.actionUrl && (
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => window.open(step.actionUrl, '_blank')}
+							>
+								{step.actionLabel ?? 'Try it'}
+							</Button>
+						)}
+						{!isCompleted && (
+							<Button size="sm" onClick={onComplete}>
+								Mark as Complete
+							</Button>
+						)}
+					</div>
+				</div>
+			)}
+		</div>
+	);
 }

package/src/components/index.ts

@@ -1,3 +1,3 @@
-export { StepChecklist } from './StepChecklist';
 export { CodeSnippet } from './CodeSnippet';
 export { JourneyMap } from './JourneyMap';
+export { StepChecklist } from './StepChecklist';

package/src/docs/learning-journey-ui-onboarding.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-onboarding',
-    title: 'Learning Journey UI — Onboarding',
-    summary:
-      'UI mini-app components for onboarding: checklists, snippets, and journey mapping.',
-    kind: 'reference',
-    visibility: 'public',
-    route: '/docs/examples/learning-journey-ui-onboarding',
-    tags: ['learning', 'ui', 'onboarding'],
-    body: `## Includes\n- Onboarding mini-app shell\n- Views: overview, steps, progress, timeline\n- Components: step checklist, code snippet, journey map\n\n## Notes\n- Compose with design system components.\n- Ensure accessible labels and keyboard navigation.`,
-  },
+	{
+		id: 'docs.examples.learning-journey-ui-onboarding',
+		title: 'Learning Journey UI — Onboarding',
+		summary:
+			'UI mini-app components for onboarding: checklists, snippets, and journey mapping.',
+		kind: 'reference',
+		visibility: 'public',
+		route: '/docs/examples/learning-journey-ui-onboarding',
+		tags: ['learning', 'ui', 'onboarding'],
+		body: `## Includes\n- Onboarding mini-app shell\n- Views: overview, steps, progress, timeline\n- Components: step checklist, code snippet, journey map\n\n## Notes\n- Compose with design system components.\n- Ensure accessible labels and keyboard navigation.`,
+	},
 ];
 
 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-onboarding',
-    version: '1.0.0',
-    title: 'Learning Journey UI — Onboarding',
-    description:
-      'UI mini-app for onboarding patterns: checklists, code snippets, journey map.',
-    kind: 'ui',
-    visibility: 'public',
-    stability: 'experimental',
-    owners: ['@platform.core'],
-    tags: ['learning', 'ui', 'onboarding'],
-  },
-  docs: {
-    rootDocId: 'docs.examples.learning-journey-ui-onboarding',
-  },
-  entrypoints: {
-    packageName: '@contractspec/example.learning-journey-ui-onboarding',
-    docs: './docs',
-  },
-  surfaces: {
-    templates: true,
-    sandbox: { enabled: true, modes: ['playground', 'markdown'] },
-    studio: { enabled: true, installable: true },
-    mcp: { enabled: true },
-  },
+	meta: {
+		key: 'learning-journey-ui-onboarding',
+		version: '1.0.0',
+		title: 'Learning Journey UI — Onboarding',
+		description:
+			'UI mini-app for onboarding patterns: checklists, code snippets, journey map.',
+		kind: 'ui',
+		visibility: 'public',
+		stability: 'experimental',
+		owners: ['@platform.core'],
+		tags: ['learning', 'ui', 'onboarding'],
+	},
+	docs: {
+		rootDocId: 'docs.examples.learning-journey-ui-onboarding',
+	},
+	entrypoints: {
+		packageName: '@contractspec/example.learning-journey-ui-onboarding',
+		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 { OnboardingMiniApp } from './OnboardingMiniApp';
-
-// Views
-export { Overview, Steps, Progress, Timeline } from './views';
 
 // Components
-export { StepChecklist, CodeSnippet, JourneyMap } from './components';
-export * from './learning-journey-ui-onboarding.feature';
+export { CodeSnippet, JourneyMap, StepChecklist } from './components';
 export { default as example } from './example';
+export * from './learning-journey-ui-onboarding.feature';
+export { OnboardingMiniApp } from './OnboardingMiniApp';
+// Views
+export { Overview, Progress, Steps, Timeline } from './views';
 import './docs';

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

@@ -1,17 +1,17 @@
 import { defineFeature } from '@contractspec/lib.contracts-spec';
 
 export const LearningJourneyUiOnboardingFeature = defineFeature({
-  meta: {
-    key: 'learning-journey-ui-onboarding',
-    version: '1.0.0',
-    title: 'Learning Journey UI: Onboarding',
-    description:
-      'Developer onboarding UI with checklists, journey maps, and step-by-step progress',
-    domain: 'learning-journey',
-    owners: ['@examples'],
-    tags: ['learning', 'ui', 'onboarding', 'checklists'],
-    stability: 'experimental',
-  },
+	meta: {
+		key: 'learning-journey-ui-onboarding',
+		version: '1.0.0',
+		title: 'Learning Journey UI: Onboarding',
+		description:
+			'Developer onboarding UI with checklists, journey maps, and step-by-step progress',
+		domain: 'learning-journey',
+		owners: ['@examples'],
+		tags: ['learning', 'ui', 'onboarding', 'checklists'],
+		stability: 'experimental',
+	},
 
-  docs: ['docs.examples.learning-journey-ui-onboarding'],
+	docs: ['docs.examples.learning-journey-ui-onboarding'],
 });