@academy-sdk/sdk 0.1.1 → 0.2.0

package/src/components/molecules/EmptyState.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { cn } from '../utils';
+
+export interface EmptyStateProps {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  className?: string;
+}
+
+export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+  return (
+    <div className={cn('flex flex-col items-center justify-center py-12 text-center', className)}>
+      {icon && <div className="mb-4 text-theme-text-muted">{icon}</div>}
+      <h3 className="text-lg font-semibold text-theme-text-primary">{title}</h3>
+      {description && (
+        <p className="mt-2 text-sm text-theme-text-secondary max-w-md">{description}</p>
+      )}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  );
+}

package/src/components/molecules/LoadingSpinner.tsx

@@ -0,0 +1,27 @@
+import { cn } from '../utils';
+
+export interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  text?: string;
+}
+
+const sizeClasses = {
+  sm: 'h-4 w-4',
+  md: 'h-8 w-8',
+  lg: 'h-12 w-12',
+};
+
+export function LoadingSpinner({ size = 'md', className, text }: LoadingSpinnerProps) {
+  return (
+    <div className={cn('flex flex-col items-center justify-center gap-3', className)}>
+      <div
+        className={cn(
+          'animate-spin rounded-full border-2 border-theme-bg-tertiary border-t-theme-accent-primary',
+          sizeClasses[size]
+        )}
+      />
+      {text && <p className="text-sm text-theme-text-secondary">{text}</p>}
+    </div>
+  );
+}

package/src/components/molecules/PageHeader.tsx

@@ -0,0 +1,22 @@
+import { cn } from '../utils';
+
+export interface PageHeaderProps {
+  title: string;
+  description?: string;
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+export function PageHeader({ title, description, actions, className }: PageHeaderProps) {
+  return (
+    <div className={cn('flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6', className)}>
+      <div>
+        <h1 className="text-2xl font-bold text-theme-text-primary">{title}</h1>
+        {description && (
+          <p className="text-sm text-theme-text-secondary mt-1">{description}</p>
+        )}
+      </div>
+      {actions && <div className="flex items-center gap-2">{actions}</div>}
+    </div>
+  );
+}

package/src/components/molecules/Pagination.tsx

@@ -0,0 +1,82 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../utils';
+
+export interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  total: number;
+  pageSize: number;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  onPageChange: (page: number) => void;
+  maxVisiblePages?: number;
+  className?: string;
+}
+
+export function Pagination({
+  currentPage,
+  totalPages,
+  total,
+  pageSize,
+  hasNextPage,
+  hasPreviousPage,
+  onPageChange,
+  maxVisiblePages = 5,
+  className,
+}: PaginationProps) {
+  const renderPageNumbers = () => {
+    const pages = [];
+    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+    let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+
+    if (endPage - startPage < maxVisiblePages - 1) {
+      startPage = Math.max(1, endPage - maxVisiblePages + 1);
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(
+        <button
+          key={i}
+          onClick={() => onPageChange(i)}
+          className={cn(
+            'px-3 py-1 rounded cursor-pointer transition-colors',
+            i === currentPage
+              ? 'bg-theme-accent-primary text-white'
+              : 'text-theme-text-primary border border-theme-border-primary hover:bg-theme-bg-tertiary'
+          )}
+        >
+          {i}
+        </button>
+      );
+    }
+
+    return pages;
+  };
+
+  return (
+    <div className={cn('flex items-center justify-between border-t border-theme-border-primary pt-4', className)}>
+      <div className="text-sm text-theme-text-secondary">
+        Showing {((currentPage - 1) * pageSize) + 1} to {Math.min(currentPage * pageSize, total)} of {total} results
+      </div>
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={!hasPreviousPage}
+          className="p-2 rounded border border-theme-border-primary hover:bg-theme-bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-colors"
+          aria-label="Previous page"
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </button>
+        {renderPageNumbers()}
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={!hasNextPage}
+          className="p-2 rounded border border-theme-border-primary hover:bg-theme-bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-colors"
+          aria-label="Next page"
+        >
+          <ChevronRight className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/molecules/SearchInput.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { Search, X } from 'lucide-react';
+import { cn } from '../utils';
+
+export interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function SearchInput({ value, onChange, placeholder = 'Search...', className }: SearchInputProps) {
+  return (
+    <div className={cn('relative', className)}>
+      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-theme-text-muted" />
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="w-full pl-10 pr-10 py-2 text-sm rounded-lg border border-theme-border-primary bg-theme-bg-primary text-theme-text-primary placeholder:text-[rgb(var(--text-muted))] focus:outline-none focus:border-theme-accent-primary transition-colors"
+      />
+      {value && (
+        <button
+          onClick={() => onChange('')}
+          className="absolute right-3 top-1/2 -translate-y-1/2 text-theme-text-muted hover:text-theme-text-primary cursor-pointer"
+          aria-label="Clear search"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      )}
+    </div>
+  );
+}

package/{dist/components/molecules/index.d.ts → src/components/molecules/index.ts}

@@ -10,4 +10,3 @@ export { EmptyState } from './EmptyState';
 export type { EmptyStateProps } from './EmptyState';
 export { LoadingSpinner } from './LoadingSpinner';
 export type { LoadingSpinnerProps } from './LoadingSpinner';
-//# sourceMappingURL=index.d.ts.map

package/src/components/organisms/CourseSidebar.tsx

@@ -0,0 +1,276 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { ArrowLeft, Search, X, Lock, ClipboardList, Award, Check, ChevronRight } from 'lucide-react';
+import { cn } from '../utils';
+import { Button } from '../atoms/Button';
+import { ProgressBar } from '../atoms/ProgressBar';
+
+export interface CourseSidebarLesson {
+  id: string;
+  title: string;
+  duration?: string;
+  completed?: boolean;
+  locked?: boolean;
+  availableAt?: string;
+  hasPrerequisite?: boolean;
+  lessonIcon?: string;
+  type?: string;
+}
+
+export interface CourseSidebarModule {
+  id: string;
+  title: string;
+  lessons: CourseSidebarLesson[];
+}
+
+export interface CourseSidebarProps {
+  courseTitle: string;
+  modules: CourseSidebarModule[];
+  currentLessonId: string;
+  expandedModules: Set<string>;
+  completedCount: number;
+  totalCount: number;
+  onToggleModule: (moduleId: string) => void;
+  onSelectLesson: (lessonId: string) => void;
+  hideProgress?: boolean;
+  hideSearch?: boolean;
+  certificateEnabled?: boolean;
+  isCompleted?: boolean;
+  onDownloadCertificate?: () => void;
+  isDownloadingCertificate?: boolean;
+  onBack?: () => void;
+  showBackButton?: boolean;
+  className?: string;
+}
+
+const lessonColors = [
+  'bg-[#E2F0FF] border-l-4 border-[#3aa3a5]',
+  'bg-[#fcddb5] border-l-4 border-[#d67a05]',
+  'bg-[#FAD1CE] border-l-4 border-[#7ab3f0]',
+];
+
+export function CourseSidebar({
+  courseTitle,
+  modules,
+  currentLessonId,
+  expandedModules,
+  completedCount,
+  totalCount,
+  onToggleModule,
+  onSelectLesson,
+  hideProgress = false,
+  hideSearch = false,
+  certificateEnabled = false,
+  isCompleted = false,
+  onDownloadCertificate,
+  isDownloadingCertificate = false,
+  onBack,
+  showBackButton = true,
+  className,
+}: CourseSidebarProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredModules = useMemo(() => {
+    if (!searchQuery.trim()) return modules;
+    const query = searchQuery.toLowerCase();
+    return modules
+      .map((mod) => ({
+        ...mod,
+        lessons: mod.lessons.filter((l) => l.title.toLowerCase().includes(query)),
+      }))
+      .filter((mod) => mod.lessons.length > 0);
+  }, [modules, searchQuery]);
+
+  const totalResults = filteredModules.reduce((sum, m) => sum + m.lessons.length, 0);
+  const progressPct = totalCount > 0 ? (completedCount / totalCount) * 100 : 0;
+
+  const formatDuration = (duration?: string): string => {
+    if (!duration) return '';
+    const text = duration.trim();
+    if (!text) return '';
+    if (/[a-zA-Z]/.test(text)) return text;
+    const parts = text.split(':').map(Number);
+    if (parts.some(isNaN)) return text;
+    if (parts.length === 3) {
+      const [hrs, mins] = parts;
+      if (hrs > 0 && mins > 0) return `${hrs} ${hrs === 1 ? 'hour' : 'hours'} ${mins} min`;
+      if (hrs > 0) return `${hrs} ${hrs === 1 ? 'hour' : 'hours'}`;
+      return `${mins} min`;
+    }
+    if (parts.length === 2) {
+      const [mins, secs] = parts;
+      return `${mins > 0 ? mins : secs > 0 ? 1 : 0} min`;
+    }
+    return `${Math.max(1, Math.round(parts[0] / 60))} min`;
+  };
+
+  let globalLessonIndex = 0;
+
+  return (
+    <div className={cn('w-full lg:w-[350px] bg-white flex-shrink-0 flex flex-col border-r border-gray-100 lg:h-screen lg:sticky lg:top-0 overflow-y-auto', className)}>
+      <div className="p-6">
+        {showBackButton && onBack && (
+          <button
+            onClick={onBack}
+            className="w-10 h-10 bg-[#4ecdc4] rounded-md flex items-center justify-center text-white hover:bg-[#3dbdb4] transition-colors mb-6 cursor-pointer"
+            aria-label="Go back"
+          >
+            <ArrowLeft className="w-5 h-5" />
+          </button>
+        )}
+
+        <h3 className="text-3xl font-semibold text-[#1f2937] leading-tight">
+          {courseTitle ? `${courseTitle.charAt(0).toUpperCase()}${courseTitle.slice(1)}` : ''}
+        </h3>
+
+        {!hideProgress && (
+          <div className="mt-4">
+            <ProgressBar value={progressPct} size="sm" />
+            <p className="text-xs text-gray-400 mt-1 text-right">
+              {completedCount} / {totalCount} lessons · {Math.round(progressPct)}%
+            </p>
+          </div>
+        )}
+
+        {certificateEnabled && isCompleted && onDownloadCertificate && completedCount === totalCount && totalCount > 0 && (
+          <Button
+            onClick={onDownloadCertificate}
+            disabled={isDownloadingCertificate}
+            className="w-full mt-3 bg-green-600 hover:bg-green-700 disabled:opacity-50 text-white"
+          >
+            <Award className="w-4 h-4 mr-2" />
+            {isDownloadingCertificate ? 'Downloading...' : 'Download Certificate'}
+          </Button>
+        )}
+
+        {!hideSearch && (
+          <div className="mt-3 relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <input
+              type="text"
+              placeholder="Search lessons..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-9 pr-9 py-2 text-sm bg-gray-50 border border-gray-200 text-gray-700 placeholder:text-gray-400 rounded-lg focus:outline-none focus:border-[#49BBBD] transition-colors"
+            />
+            {searchQuery && (
+              <>
+                <button
+                  onClick={() => setSearchQuery('')}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 cursor-pointer"
+                  aria-label="Clear search"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+                <p className="text-xs text-gray-400 mt-1">
+                  {totalResults} {totalResults === 1 ? 'lesson' : 'lessons'} found
+                </p>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="flex-1 px-4 space-y-8 pb-10">
+        {filteredModules.length === 0 ? (
+          <div className="text-center py-8">
+            <Search className="w-10 h-10 text-gray-300 mx-auto mb-2" />
+            <p className="text-sm text-gray-400">No lessons found for &ldquo;{searchQuery}&rdquo;</p>
+            <button onClick={() => setSearchQuery('')} className="mt-2 text-sm text-[#49BBBD] hover:underline font-medium cursor-pointer">
+              Clear search
+            </button>
+          </div>
+        ) : (
+          filteredModules.map((module) => {
+            const isExpanded = expandedModules.has(module.id) || !!searchQuery.trim();
+            return (
+              <div key={module.id}>
+                <button
+                  type="button"
+                  onClick={() => onToggleModule(module.id)}
+                  aria-expanded={isExpanded}
+                  className="w-full flex items-center justify-between text-left mb-3 px-2 cursor-pointer"
+                >
+                  <h3 className="text-sm font-bold text-gray-500 uppercase tracking-wider">{module.title}</h3>
+                  <ChevronRight className={cn('w-4 h-4 transition-transform', isExpanded ? 'rotate-90 text-[#49BBBD]' : 'text-gray-400')} />
+                </button>
+
+                {isExpanded && (
+                  <div className="space-y-3">
+                    {module.lessons.map((lesson) => {
+                      const isCurrent = currentLessonId === lesson.id;
+                      const isLocked = lesson.locked === true;
+                      const colorClass = lessonColors[globalLessonIndex % lessonColors.length];
+                      globalLessonIndex++;
+
+                      let availabilityText = '';
+                      if (isLocked) {
+                        if (lesson.availableAt) {
+                          const diffDays = Math.ceil((new Date(lesson.availableAt).getTime() - Date.now()) / 86400000);
+                          availabilityText = diffDays > 0 ? `Available in ${diffDays}d` : `Available on ${new Date(lesson.availableAt).toLocaleDateString()}`;
+                        } else if (lesson.hasPrerequisite) {
+                          availabilityText = 'Complete previous lesson';
+                        }
+                      }
+
+                      return (
+                        <button
+                          key={lesson.id}
+                          title={lesson.title}
+                          onClick={() => !isLocked && onSelectLesson(lesson.id)}
+                          disabled={isLocked}
+                          className={cn(
+                            'w-full text-left p-4 rounded-lg flex items-center justify-between transition-transform',
+                            isLocked ? 'opacity-50 cursor-not-allowed' : 'hover:scale-[1.02] active:scale-[0.98] cursor-pointer',
+                            isCurrent ? 'bg-[#49BBBD] text-white shadow-md ring-2 ring-[#2a9ea0]/40' : colorClass
+                          )}
+                        >
+                          <div className="flex items-center gap-3 overflow-hidden">
+                            {lesson.completed ? (
+                              <div className="w-5 h-5 rounded-full border-2 bg-green-500 border-green-500 flex items-center justify-center flex-shrink-0">
+                                <Check className="w-3 h-3 text-white" />
+                              </div>
+                            ) : isLocked ? (
+                              <div className="w-5 h-5 rounded-full border-2 border-gray-400 flex items-center justify-center flex-shrink-0">
+                                <Lock className="w-2.5 h-2.5 text-gray-500" />
+                              </div>
+                            ) : (
+                              <div className={cn('w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0', isCurrent ? 'border-white/60' : 'border-gray-400')}>
+                                <div className={cn('w-2.5 h-2.5 rounded-sm', isCurrent ? 'bg-white/80' : 'bg-[#1f2a44]')} />
+                              </div>
+                            )}
+                            <div className="overflow-hidden">
+                              <div className="flex items-center gap-1.5">
+                                {lesson.type === 'ASSESSMENT' ? (
+                                  <ClipboardList className={cn('w-3.5 h-3.5 flex-shrink-0', isCurrent ? 'text-white' : 'text-gray-600')} />
+                                ) : null}
+                                <span className={cn('text-sm font-medium truncate', isCurrent ? 'text-white' : 'text-gray-800')}>
+                                  {lesson.title}
+                                </span>
+                              </div>
+                              {isLocked && availabilityText && (
+                                <p className="text-xs text-gray-600 mt-0.5 truncate">{availabilityText}</p>
+                              )}
+                            </div>
+                          </div>
+                          {lesson.type === 'ASSESSMENT' ? (
+                            <span className={cn('text-xs font-semibold flex-shrink-0 ml-2', isCurrent ? 'text-white/90' : 'text-gray-600')}>Quiz</span>
+                          ) : lesson.duration ? (
+                            <span className={cn('text-xs font-semibold flex-shrink-0 ml-2', isCurrent ? 'text-white/90' : 'text-gray-600')}>
+                              {formatDuration(lesson.duration)}
+                            </span>
+                          ) : null}
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/organisms/LearnerNavbar.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { User, Menu, ChevronDown, LogOut, BookOpen } from 'lucide-react';
+import { cn } from '../utils';
+import { useSDK } from '../../hooks/sdk-context';
+
+export interface LearnerNavbarProps {
+  hideMenuButton?: boolean;
+  onMenuClick?: () => void;
+  onProfileClick?: () => void;
+  onLogoClick?: () => void;
+}
+
+export function LearnerNavbar({ hideMenuButton = false, onMenuClick, onProfileClick, onLogoClick }: LearnerNavbarProps) {
+  const sdk = useSDK();
+  const { user } = sdk.useUser();
+  const { logout } = sdk.useLogout();
+  const [profileDropdownOpen, setProfileDropdownOpen] = useState(false);
+  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+    };
+  }, []);
+
+  const openDropdown = () => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    setProfileDropdownOpen(true);
+  };
+
+  const closeDropdownWithDelay = () => {
+    if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+    closeTimeoutRef.current = setTimeout(() => {
+      setProfileDropdownOpen(false);
+      closeTimeoutRef.current = null;
+    }, 150);
+  };
+
+  return (
+    <header style={{ top: 'var(--preview-toolbar-h, 0px)' }} className="fixed left-0 right-0 z-30 h-20 border-b border-theme-border-primary bg-theme-bg-secondary">
+      <div className="flex h-full items-center justify-between px-4 sm:px-6 lg:px-10 xl:px-12 2xl:px-16">
+        <div className="flex items-center gap-4">
+          {!hideMenuButton && (
+            <button
+              onClick={onMenuClick}
+              className="rounded-lg p-2 hover:bg-theme-bg-tertiary lg:hidden"
+            >
+              <Menu className="h-5 w-5 text-theme-text-primary" />
+            </button>
+          )}
+        </div>
+
+        <div className="ml-auto flex items-center">
+          <div
+            className="relative group ml-2 sm:ml-4 border-l border-theme-border-primary pl-3 sm:pl-5"
+            onMouseEnter={openDropdown}
+            onMouseLeave={closeDropdownWithDelay}
+          >
+            <button
+              onClick={() => setProfileDropdownOpen((o) => !o)}
+              className="flex items-center gap-2 sm:gap-3 hover:opacity-80 cursor-pointer transition-opacity"
+            >
+              <div className="relative flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-full bg-theme-accent-primary text-sm font-semibold text-white overflow-hidden">
+                {user?.profileImage ? (
+                  <img src={user.profileImage} alt="Profile" className="w-full h-full object-cover" />
+                ) : (
+                  user?.name?.charAt(0) || 'S'
+                )}
+              </div>
+              {user && (
+                <div className="hidden md:flex items-center gap-3">
+                  <div className="text-sm font-medium text-theme-text-primary">{user.name}</div>
+                  <ChevronDown
+                    className={cn(
+                      'h-4 w-4 text-theme-text-secondary transition-transform group-hover:rotate-180',
+                      profileDropdownOpen && 'rotate-180'
+                    )}
+                  />
+                </div>
+              )}
+            </button>
+
+            {profileDropdownOpen && (
+              <div
+                className="absolute right-0 top-full z-50 mt-2 w-56 rounded-lg border border-theme-border-primary bg-theme-bg-secondary shadow-lg"
+                onMouseEnter={openDropdown}
+                onMouseLeave={closeDropdownWithDelay}
+              >
+                <div className="border-b border-theme-border-primary p-3">
+                  <p className="text-sm font-medium text-theme-text-primary">{user?.name}</p>
+                  <p className="text-xs text-theme-text-muted">{user?.email}</p>
+                </div>
+                <div className="p-2">
+                  <button
+                    onClick={() => {
+                      onProfileClick?.();
+                      setProfileDropdownOpen(false);
+                    }}
+                    className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-theme-text-secondary transition-colors hover:bg-[rgb(var(--accent-primary))]/15 hover:text-[rgb(var(--accent-primary))] cursor-pointer"
+                  >
+                    <User className="h-4 w-4" />
+                    My Profile
+                  </button>
+                </div>
+                <div className="border-t border-theme-border-primary p-2">
+                  <button
+                    onClick={() => {
+                      logout();
+                      setProfileDropdownOpen(false);
+                    }}
+                    className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-theme-text-secondary transition-colors hover:bg-[rgb(var(--accent-primary))]/15 hover:text-[rgb(var(--accent-primary))] cursor-pointer"
+                  >
+                    <LogOut className="h-4 w-4" />
+                    Logout
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}