react-native-elearn-ui 0.1.0

package/src/screens/ResultScreen.tsx

@@ -0,0 +1,303 @@
+import React from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  SafeAreaView,
+  StatusBar,
+} from 'react-native';
+import type { QuizResults, Question } from '../types';
+import { useElearnConfig } from '../context/ElearnConfigContext';
+import { useTheme } from '../context/ThemeContext';
+import { Typography, Card, CircularProgress, Button, Icon } from '../components';
+
+interface ResultScreenProps {
+  results: QuizResults;
+  questions: Question[];
+  onClose: () => void;
+  onReviewAnswers?: () => void;
+}
+
+export const ResultScreen: React.FC<ResultScreenProps> = ({
+  results,
+  questions,
+  onClose,
+  onReviewAnswers,
+}) => {
+  const { getString } = useElearnConfig();
+  const theme = useTheme();
+
+  const formatTime = (totalSeconds: number) => {
+    const mins = Math.floor(totalSeconds / 60);
+    const secs = totalSeconds % 60;
+    if (mins > 0) {
+      return `${mins}m ${secs}s`;
+    }
+    return `${secs}s`;
+  };
+
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
+      <StatusBar barStyle="dark-content" />
+
+      {/* Header */}
+      <View style={styles.header}>
+        <View style={styles.headerLeftPlaceholder} />
+        <Typography variant="h2" bold>
+          {getString('resultsTitle')}
+        </Typography>
+        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+          <Icon name="x-circle" size={24} color={theme.textSecondary} />
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        
+        {/* Scorecard Summary */}
+        <Card bordered style={styles.summaryCard}>
+          <View style={styles.summaryRow}>
+            <View style={styles.summaryLeft}>
+              <Typography variant="h1" bold color={theme.textPrimary}>
+                {getString('scorecardTitle')}
+              </Typography>
+              <Typography variant="body" color={theme.textSecondary} style={styles.summarySubtitle}>
+                {getString('resultsSubtitle')}
+              </Typography>
+              
+              <View style={styles.statsContainer}>
+                <View style={styles.statBox}>
+                  <Typography variant="caption" color={theme.textSecondary}>
+                    {getString('correctAnswersCountLabel')}
+                  </Typography>
+                  <Typography variant="h2" bold color={theme.success}>
+                    {results.correctCount} / {results.totalQuestions}
+                  </Typography>
+                </View>
+                
+                <View style={styles.statBox}>
+                  <Typography variant="caption" color={theme.textSecondary}>
+                    {getString('timeSpentLabel')}
+                  </Typography>
+                  <Typography variant="h2" bold color={theme.textPrimary}>
+                    {formatTime(results.timeSpentSeconds)}
+                  </Typography>
+                </View>
+              </View>
+            </View>
+
+            <View style={styles.summaryRight}>
+              <CircularProgress
+                progress={results.accuracy / 100}
+                size={84}
+                strokeWidth={8}
+                color={results.accuracy >= 60 ? theme.success : theme.warning}
+                backgroundColor={theme.secondary}
+                textStyle={{ fontSize: 16 }}
+              />
+              <Typography variant="caption" color={theme.textSecondary} style={styles.accuracyText}>
+                {getString('accuracyLabel')}
+              </Typography>
+            </View>
+          </View>
+        </Card>
+
+        {/* Detailed Question Review List */}
+        <View style={styles.sectionHeader}>
+          <Typography variant="h2" bold>
+            Questions Summary
+          </Typography>
+        </View>
+
+        <View style={styles.reviewList}>
+          {questions.map((question, idx) => {
+            const userAnswerIdx = results.userAnswers[question.id];
+            const isCorrect = userAnswerIdx === question.correctOptionIndex;
+            const optionPrefixes = ['A', 'B', 'C', 'D', 'E'];
+
+            return (
+              <Card key={question.id} bordered style={styles.reviewCard}>
+                <View style={styles.reviewCardHeader}>
+                  <View style={[styles.questionNumBadge, { backgroundColor: theme.secondary }]}>
+                    <Typography variant="caption" bold color={theme.primary}>
+                      Q{idx + 1}
+                    </Typography>
+                  </View>
+                  
+                  <View style={styles.statusBadge}>
+                    <Icon
+                      name={isCorrect ? 'check-circle' : 'x-circle'}
+                      size={18}
+                      color={isCorrect ? theme.success : theme.danger}
+                    />
+                    <Typography
+                      variant="caption"
+                      bold
+                      color={isCorrect ? theme.success : theme.danger}
+                      style={styles.statusBadgeText}
+                    >
+                      {isCorrect ? 'Correct' : 'Incorrect'}
+                    </Typography>
+                  </View>
+                </View>
+
+                <Typography variant="body" bold style={styles.reviewQuestionText}>
+                  {question.text}
+                </Typography>
+
+                <View style={styles.userSelectionContainer}>
+                  <Typography variant="caption" color={theme.textSecondary}>
+                    Your answer:{' '}
+                    <Typography variant="caption" bold color={isCorrect ? theme.success : theme.danger}>
+                      {userAnswerIdx !== undefined
+                        ? `Option ${optionPrefixes[userAnswerIdx] || userAnswerIdx + 1}`
+                        : 'Skipped'}
+                    </Typography>
+                  </Typography>
+                  
+                  {!isCorrect && (
+                    <Typography variant="caption" color={theme.textSecondary} style={styles.correctAnswerText}>
+                      Correct answer:{' '}
+                      <Typography variant="caption" bold color={theme.success}>
+                        Option {optionPrefixes[question.correctOptionIndex] || question.correctOptionIndex + 1}
+                      </Typography>
+                    </Typography>
+                  )}
+                </View>
+              </Card>
+            );
+          })}
+        </View>
+
+      </ScrollView>
+
+      {/* Footer Controls */}
+      <View style={[styles.footer, { backgroundColor: theme.cardBackground, borderTopColor: theme.border }]}>
+        {onReviewAnswers && (
+          <Button
+            title={getString('reviewAnswersButton')}
+            onPress={onReviewAnswers}
+            variant="outline"
+            style={styles.reviewBtn}
+          />
+        )}
+        <Button
+          title={getString('goHomeButton')}
+          onPress={onClose}
+          variant="primary"
+          style={styles.homeBtn}
+        />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+  },
+  headerLeftPlaceholder: {
+    width: 40,
+  },
+  closeButton: {
+    padding: 4,
+  },
+  scrollContent: {
+    paddingHorizontal: 20,
+    paddingTop: 12,
+    paddingBottom: 40,
+  },
+  summaryCard: {
+    padding: 20,
+    borderRadius: 20,
+  },
+  summaryRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  summaryLeft: {
+    flex: 1,
+    paddingRight: 16,
+  },
+  summarySubtitle: {
+    marginTop: 4,
+    marginBottom: 16,
+  },
+  statsContainer: {
+    flexDirection: 'row',
+  },
+  statBox: {
+    marginRight: 24,
+  },
+  summaryRight: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  accuracyText: {
+    marginTop: 8,
+    fontWeight: '600',
+  },
+  sectionHeader: {
+    marginTop: 28,
+    marginBottom: 12,
+  },
+  reviewList: {
+    marginTop: 4,
+  },
+  reviewCard: {
+    padding: 16,
+    marginBottom: 12,
+  },
+  reviewCardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  questionNumBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 8,
+  },
+  statusBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  statusBadgeText: {
+    marginLeft: 6,
+  },
+  reviewQuestionText: {
+    lineHeight: 20,
+    marginBottom: 10,
+  },
+  userSelectionContainer: {
+    backgroundColor: '#F8FAFC',
+    padding: 10,
+    borderRadius: 8,
+  },
+  correctAnswerText: {
+    marginTop: 4,
+  },
+  footer: {
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    borderTopWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  reviewBtn: {
+    flex: 1,
+    marginRight: 12,
+  },
+  homeBtn: {
+    flex: 1,
+  },
+});

package/src/screens/TopicListScreen.tsx

@@ -0,0 +1,200 @@
+import React from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  SafeAreaView,
+  StatusBar,
+} from 'react-native';
+import type { Course } from '../types';
+import { useElearnConfig } from '../context/ElearnConfigContext';
+import { useTheme } from '../context/ThemeContext';
+import { Typography, Card, ProgressBar, Icon } from '../components';
+
+interface TopicListScreenProps {
+  course: Course;
+  onBack: () => void;
+}
+
+export const TopicListScreen: React.FC<TopicListScreenProps> = ({
+  course,
+  onBack,
+}) => {
+  const { callbacks, getString } = useElearnConfig();
+  const theme = useTheme();
+
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
+      <StatusBar barStyle="dark-content" />
+      
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity
+          onPress={onBack}
+          style={[styles.backButton, { borderColor: theme.border }]}
+        >
+          <Icon name="arrow-left" size={20} color={theme.textPrimary} />
+        </TouchableOpacity>
+        <Typography variant="h3" bold style={styles.headerTitle} numberOfLines={1}>
+          {course.title}
+        </Typography>
+        <View style={styles.headerRightPlaceholder} />
+      </View>
+
+      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        
+        {/* Subject Summary Card */}
+        <Card style={[styles.summaryCard, { backgroundColor: theme.primary }]}>
+          <Typography variant="h2" bold color="#FFFFFF">
+            {course.title}
+          </Typography>
+          {course.description && (
+            <Typography variant="caption" color="rgba(255, 255, 255, 0.8)" style={styles.summaryDesc}>
+              {course.description}
+            </Typography>
+          )}
+          <View style={styles.progressSummaryContainer}>
+            <View style={styles.progressSummaryText}>
+              <Typography variant="caption" color="#FFFFFF">
+                Overall Subject Progress
+              </Typography>
+              <Typography variant="label" bold color="#FFFFFF">
+                {course.completedQuestions}/{course.totalQuestions} Questions answered
+              </Typography>
+            </View>
+            <Typography variant="h2" bold color="#FFFFFF">
+              {Math.round(course.progress * 100)}%
+            </Typography>
+          </View>
+          <ProgressBar progress={course.progress} color="#FFFFFF" style={styles.summaryProgressBar} />
+        </Card>
+
+        {/* List of Topics */}
+        <View style={styles.sectionHeader}>
+          <Typography variant="h2" bold color={theme.textPrimary}>
+            {getString('topicsLabel')} ({course.topics.length})
+          </Typography>
+        </View>
+
+        <View style={styles.topicsList}>
+          {course.topics.map((topic) => {
+            const pct = Math.round(topic.progress * 100);
+
+            return (
+              <TouchableOpacity
+                key={topic.id}
+                activeOpacity={0.8}
+                onPress={() => callbacks.onSelectTopic?.(course, topic)}
+              >
+                <Card bordered style={styles.topicCard}>
+                  <View style={styles.topicCardHeader}>
+                    <View style={styles.topicTitleSection}>
+                      <Typography variant="h3" bold color={theme.textPrimary}>
+                        {topic.title}
+                      </Typography>
+                      <Typography variant="caption" color={theme.textSecondary}>
+                        {topic.completedQuestions}/{topic.totalQuestions} {getString('questionsCountLabel')}
+                      </Typography>
+                    </View>
+                    <View style={styles.pctBadge}>
+                      <Typography variant="caption" bold color={theme.primary}>
+                        {pct}%
+                      </Typography>
+                    </View>
+                  </View>
+                  <ProgressBar progress={topic.progress} style={styles.topicProgressBar} />
+                </Card>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerTitle: {
+    flex: 1,
+    textAlign: 'center',
+    marginHorizontal: 12,
+  },
+  headerRightPlaceholder: {
+    width: 40,
+  },
+  scrollContent: {
+    paddingHorizontal: 20,
+    paddingBottom: 24,
+  },
+  summaryCard: {
+    padding: 20,
+    borderRadius: 20,
+    marginTop: 12,
+  },
+  summaryDesc: {
+    marginTop: 6,
+  },
+  progressSummaryContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+    marginTop: 20,
+    marginBottom: 8,
+  },
+  progressSummaryText: {
+    flex: 1,
+  },
+  summaryProgressBar: {
+    backgroundColor: 'rgba(255, 255, 255, 0.25)',
+  },
+  sectionHeader: {
+    marginTop: 24,
+    marginBottom: 12,
+  },
+  topicsList: {
+    marginTop: 4,
+  },
+  topicCard: {
+    padding: 16,
+    marginBottom: 12,
+  },
+  topicCardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  topicTitleSection: {
+    flex: 1,
+    paddingRight: 12,
+  },
+  pctBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 8,
+    backgroundColor: 'rgba(0, 122, 135, 0.1)', // Dynamic overlay of primary color
+  },
+  topicProgressBar: {
+    height: 6,
+  },
+});

package/src/screens/index.ts

@@ -0,0 +1,6 @@
+export { HomeScreen } from './HomeScreen';
+export { QbankScreen } from './QbankScreen';
+export { TopicListScreen } from './TopicListScreen';
+export { QuizStartScreen } from './QuizStartScreen';
+export { QuestionScreen } from './QuestionScreen';
+export { ResultScreen } from './ResultScreen';

package/src/types/index.ts

@@ -0,0 +1,122 @@
+export interface ThemeConfig {
+  primary: string;
+  secondary: string;
+  success: string;
+  danger: string;
+  warning: string;
+  background: string;
+  cardBackground: string;
+  textPrimary: string;
+  textSecondary: string;
+  textInverse: string;
+  border: string;
+  fontRegular?: string;
+  fontMedium?: string;
+  fontBold?: string;
+}
+
+export interface StringsConfig {
+  // Home Screen
+  homeHeaderTitle?: string;
+  homeHeaderSubtitle?: string;
+  dailyQuizTitle?: string;
+  dailyQuizSubtitle?: string;
+  dailyQuizProgressLabel?: string;
+  trackQuickLabel?: string;
+  subjectsTitle?: string;
+  popularTopicsTitle?: string;
+  
+  // QBank
+  qbankTitle?: string;
+  qbankSubtitle?: string;
+  topicsLabel?: string;
+  questionsCountLabel?: string;
+  
+  // Topics & Detail
+  startQuizButton?: string;
+  topicsAndItemsLabel?: string;
+  infoTitle?: string;
+  
+  // Question & Explanation
+  questionLabel?: string;
+  explanationLabel?: string;
+  nextButtonLabel?: string;
+  submitButtonLabel?: string;
+  correctAnswerLabel?: string;
+  incorrectAnswerLabel?: string;
+  
+  // Results
+  resultsTitle?: string;
+  resultsSubtitle?: string;
+  accuracyLabel?: string;
+  timeSpentLabel?: string;
+  correctAnswersCountLabel?: string;
+  reviewAnswersButton?: string;
+  goHomeButton?: string;
+  scorecardTitle?: string;
+}
+
+export interface Question {
+  id: string;
+  text: string;
+  imageUrl?: string;
+  options: string[];
+  correctOptionIndex: number;
+  explanation: string;
+}
+
+export interface Topic {
+  id: string;
+  title: string;
+  totalQuestions: number;
+  completedQuestions: number;
+  progress: number; // 0 to 1
+  questions?: Question[];
+}
+
+export interface Course {
+  id: string;
+  title: string;
+  description?: string;
+  iconName?: string; // name to match vector icons or pre-bundled icons
+  progress: number; // 0 to 1
+  totalQuestions: number;
+  completedQuestions: number;
+  topics: Topic[];
+}
+
+export interface DailyQuizConfig {
+  id: string;
+  title: string;
+  description: string;
+  questionsCount: number;
+  progressPercentage: number;
+  questions: Question[];
+}
+
+export interface ElearnConfig {
+  theme?: Partial<ThemeConfig>;
+  strings?: Partial<StringsConfig>;
+  courses?: Course[];
+  dailyQuiz?: DailyQuizConfig;
+}
+
+// Navigation / Interaction callbacks
+export interface ElearnCallbacks {
+  onStartQuiz?: (quizId: string, questions: Question[], title: string) => void;
+  onSelectCourse?: (course: Course) => void;
+  onSelectTopic?: (course: Course, topic: Topic) => void;
+  onFinishQuiz?: (quizId: string, results: QuizResults) => void;
+  onBackToDashboard?: () => void;
+}
+
+export interface QuizResults {
+  quizId: string;
+  totalQuestions: number;
+  correctCount: number;
+  wrongCount: number;
+  skippedCount: number;
+  accuracy: number; // percentage, e.g. 75
+  timeSpentSeconds: number;
+  userAnswers: { [questionId: string]: number }; // questionId -> selectedIndex
+}