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

package/src/components/XpBar.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { Progress } from '@lssm/lib.ui-kit-web/ui/progress';
+import { cn } from '@lssm/lib.ui-kit-web/ui/utils';
+import type { XpBarProps } from '../types';
+
+const sizeStyles = {
+  sm: 'h-2',
+  md: 'h-3',
+  lg: 'h-4',
+};
+
+const labelSizeStyles = {
+  sm: 'text-xs',
+  md: 'text-sm',
+  lg: 'text-base',
+};
+
+export function XpBar({
+  current,
+  max,
+  level,
+  showLabel = true,
+  size = 'md',
+}: XpBarProps) {
+  const percentage = max > 0 ? Math.min((current / max) * 100, 100) : 0;
+
+  return (
+    <div className="w-full space-y-1">
+      {showLabel && (
+        <div
+          className={cn(
+            'flex items-center justify-between',
+            labelSizeStyles[size]
+          )}
+        >
+          <span className="text-muted-foreground font-medium">
+            {level !== undefined && (
+              <span className="text-primary mr-1">Lvl {level}</span>
+            )}
+            XP
+          </span>
+          <span className="font-semibold">
+            {current.toLocaleString()} / {max.toLocaleString()}
+          </span>
+        </div>
+      )}
+      <Progress
+        value={percentage}
+        className={cn('bg-muted', sizeStyles[size])}
+      />
+    </div>
+  );
+}
+

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export { XpBar } from './XpBar';
+export { StreakCounter } from './StreakCounter';
+export { BadgeDisplay } from './BadgeDisplay';
+export { ViewTabs } from './ViewTabs';
+

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useLearningProgress } from './useLearningProgress';
+

package/src/hooks/useLearningProgress.ts

@@ -0,0 +1,102 @@
+'use client';
+
+import { useState, useCallback, useMemo } from 'react';
+import type { LearningJourneyTrackSpec } from '@lssm/module.learning-journey/track-spec';
+import type { LearningProgressState } from '../types';
+
+/** Default progress state for a new track */
+function createDefaultProgress(trackId: string): LearningProgressState {
+  return {
+    trackId,
+    completedStepIds: [],
+    currentStepId: null,
+    xpEarned: 0,
+    streakDays: 0,
+    lastActivityDate: null,
+    badges: [],
+  };
+}
+
+/** Hook for managing learning progress state */
+export function useLearningProgress(track: LearningJourneyTrackSpec) {
+  const [progress, setProgress] = useState<LearningProgressState>(() =>
+    createDefaultProgress(track.id)
+  );
+
+  const completeStep = useCallback(
+    (stepId: string) => {
+      const step = track.steps.find((s) => s.id === stepId);
+      if (!step || progress.completedStepIds.includes(stepId)) return;
+
+      setProgress((prev) => {
+        const newCompletedIds = [...prev.completedStepIds, stepId];
+        const xpReward = step.xpReward ?? 0;
+
+        // Find next incomplete step
+        const nextStep = track.steps.find(
+          (s) => !newCompletedIds.includes(s.id)
+        );
+
+        // Check if track is complete
+        const isTrackComplete = newCompletedIds.length === track.steps.length;
+        const completionBonus = isTrackComplete
+          ? (track.completionRewards?.xpBonus ?? 0)
+          : 0;
+
+        return {
+          ...prev,
+          completedStepIds: newCompletedIds,
+          currentStepId: nextStep?.id ?? null,
+          xpEarned: prev.xpEarned + xpReward + completionBonus,
+          lastActivityDate: new Date().toISOString(),
+          badges:
+            isTrackComplete && track.completionRewards?.badgeKey
+              ? [...prev.badges, track.completionRewards.badgeKey]
+              : prev.badges,
+        };
+      });
+    },
+    [track, progress.completedStepIds]
+  );
+
+  const resetProgress = useCallback(() => {
+    setProgress(createDefaultProgress(track.id));
+  }, [track.id]);
+
+  const incrementStreak = useCallback(() => {
+    setProgress((prev) => ({
+      ...prev,
+      streakDays: prev.streakDays + 1,
+      lastActivityDate: new Date().toISOString(),
+    }));
+  }, []);
+
+  const stats = useMemo(() => {
+    const totalSteps = track.steps.length;
+    const completedSteps = progress.completedStepIds.length;
+    const percentComplete =
+      totalSteps > 0 ? Math.round((completedSteps / totalSteps) * 100) : 0;
+    const totalXp =
+      track.totalXp ??
+      track.steps.reduce((sum, s) => sum + (s.xpReward ?? 0), 0) +
+        (track.completionRewards?.xpBonus ?? 0);
+
+    return {
+      totalSteps,
+      completedSteps,
+      remainingSteps: totalSteps - completedSteps,
+      percentComplete,
+      totalXp,
+      isComplete: completedSteps === totalSteps,
+    };
+  }, [track, progress.completedStepIds]);
+
+  return {
+    progress,
+    stats,
+    completeStep,
+    resetProgress,
+    incrementStreak,
+  };
+}
+

package/src/index.ts

@@ -0,0 +1,18 @@
+// Hooks
+export { useLearningProgress } from './hooks';
+
+// Components
+export { XpBar, StreakCounter, BadgeDisplay, ViewTabs } from './components';
+
+// Types
+export type {
+  LearningView,
+  LearningProgressState,
+  LearningMiniAppProps,
+  LearningViewProps,
+  XpBarProps,
+  StreakCounterProps,
+  BadgeDisplayProps,
+  ViewTabsProps,
+} from './types';
+

package/src/types.ts

@@ -0,0 +1,62 @@
+import type { LearningJourneyTrackSpec } from '@lssm/module.learning-journey/track-spec';
+
+/** View types for learning mini-apps */
+export type LearningView = 'overview' | 'steps' | 'progress' | 'timeline';
+
+/** Progress state for a learning track */
+export interface LearningProgressState {
+  trackId: string;
+  completedStepIds: string[];
+  currentStepId: string | null;
+  xpEarned: number;
+  streakDays: number;
+  lastActivityDate: string | null;
+  badges: string[];
+}
+
+/** Props for mini-app components */
+export interface LearningMiniAppProps {
+  track: LearningJourneyTrackSpec;
+  progress: LearningProgressState;
+  onStepComplete?: (stepId: string) => void;
+  onViewChange?: (view: LearningView) => void;
+  initialView?: LearningView;
+}
+
+/** Props for view components */
+export interface LearningViewProps {
+  track: LearningJourneyTrackSpec;
+  progress: LearningProgressState;
+  onStepComplete?: (stepId: string) => void;
+}
+
+/** XP bar props */
+export interface XpBarProps {
+  current: number;
+  max: number;
+  level?: number;
+  showLabel?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+/** Streak counter props */
+export interface StreakCounterProps {
+  days: number;
+  isActive?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+/** Badge display props */
+export interface BadgeDisplayProps {
+  badges: string[];
+  maxVisible?: number;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+/** View tabs props */
+export interface ViewTabsProps {
+  currentView: LearningView;
+  onViewChange: (view: LearningView) => void;
+  availableViews?: LearningView[];
+}
+

package/tsconfig.json

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