react-native-elearn-ui 0.1.11 → 0.1.13

package/src/screens/TopicListScreen.tsx

@@ -1,388 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  StatusBar,
-} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import type { Course, Topic } from '../types';
-import { useElearnConfig } from '../context/ElearnConfigContext';
-import { useTheme } from '../context/ThemeContext';
-import { Typography, Card, Icon } from '../components';
-
-interface TopicListScreenProps {
-  course?: Course;
-  courseId?: string;
-  onBack: () => void;
-  hideHeader?: boolean;
-  onSelectTopic?: (course: Course, topic: Topic) => void;
-}
-
-export const TopicListScreen: React.FC<TopicListScreenProps> = ({
-  course,
-  courseId,
-  onBack,
-  hideHeader = false,
-  onSelectTopic,
-}) => {
-  const { config, callbacks } = useElearnConfig();
-  const theme = useTheme();
-
-  const activeCourse = course || config.courses?.find((c) => c.id === courseId);
-
-  // Active filter tab
-  const [activeTab, setActiveTab] = useState('All');
-  const tabs = ['All', 'New', 'Completed', 'Paused', 'Not Started'];
-
-  if (!activeCourse) {
-    return (
-      <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
-        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
-          <Typography variant="h2" bold style={{ marginBottom: 12 }}>Course not found</Typography>
-          <TouchableOpacity
-            onPress={onBack}
-            style={{
-              paddingHorizontal: 20,
-              paddingVertical: 10,
-              borderRadius: 8,
-              backgroundColor: theme.primary,
-            }}
-          >
-            <Typography variant="body" bold color="#FFFFFF">Go Back</Typography>
-          </TouchableOpacity>
-        </View>
-      </SafeAreaView>
-    );
-  }
-
-  // Group topics by category
-  const categoriesMap: { [key: string]: Topic[] } = {};
-  activeCourse.topics.forEach((topic) => {
-    const cat = topic.category || 'GENERAL';
-    if (!categoriesMap[cat]) {
-      categoriesMap[cat] = [];
-    }
-    categoriesMap[cat].push(topic);
-  });
-
-  const categories = Object.keys(categoriesMap);
-
-  // Keep a global sequential counter for the timeline nodes
-  let globalIndex = 0;
-
-  return (
-    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
-      <StatusBar barStyle="dark-content" />
-      
-      {/* Header */}
-      {!hideHeader && (
-        <View style={styles.header}>
-          <TouchableOpacity onPress={onBack} style={styles.backButton}>
-            <Icon name="arrow-left" size={20} color={theme.textPrimary} />
-          </TouchableOpacity>
-          <Typography variant="h2" bold style={styles.headerTitle}>
-            QBank
-          </Typography>
-          <TouchableOpacity style={styles.searchButton}>
-            <Icon name="search" size={20} color={theme.textPrimary} />
-          </TouchableOpacity>
-        </View>
-      )}
-
-      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
-        
-        {/* Subject Header Suffix */}
-        <View style={styles.subjectHeader}>
-          <Typography variant="h1" bold color={theme.textPrimary} style={styles.subjectTitle}>
-            {activeCourse.title}
-          </Typography>
-          <Typography variant="body" color={theme.textSecondary}>
-            {activeCourse.topics.length} Modules
-          </Typography>
-        </View>
-
-        {/* Horizontal Filters Tabs Bar */}
-        <View style={styles.tabsContainer}>
-          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.tabsScroll}>
-            {tabs.map((tab) => {
-              const isActive = activeTab === tab;
-              return (
-                <TouchableOpacity
-                  key={tab}
-                  onPress={() => setActiveTab(tab)}
-                  style={[
-                    styles.tabButton,
-                    isActive
-                      ? { backgroundColor: theme.textPrimary }
-                      : { borderColor: theme.border, borderWidth: 1 }
-                  ]}
-                >
-                  <Typography
-                    variant="caption"
-                    bold
-                    color={isActive ? '#FFFFFF' : theme.textSecondary}
-                  >
-                    {tab}
-                  </Typography>
-                </TouchableOpacity>
-              );
-            })}
-          </ScrollView>
-        </View>
-
-        {/* Timeline of Chapters Categories */}
-        <View style={styles.listContainer}>
-          {categories.map((category) => {
-            const list = categoriesMap[category] || [];
-            
-            return (
-              <View key={category} style={styles.categoryBlock}>
-                {/* Category Section Title */}
-                <Typography variant="caption" bold color={theme.textSecondary} style={styles.categoryTitle}>
-                  {category.toUpperCase()}
-                </Typography>
-                
-                {/* Timeline Items */}
-                <View style={styles.categoryItems}>
-                  {list.map((topic) => {
-                    globalIndex++;
-                    const currentIndex = globalIndex;
-                    const isLastInCourse = currentIndex === activeCourse.topics.length;
-                    
-                    return (
-                      <View key={topic.id} style={styles.timelineItemRow}>
-                        
-                        {/* Left Side Timeline Connectors */}
-                        <View style={styles.timelineLeftColumn}>
-                          {/* Top Line connector */}
-                          {currentIndex > 1 && <View style={[styles.timelineLine, { height: '50%', top: 0 }]} />}
-                          
-                          {/* Bottom Line connector */}
-                          {!isLastInCourse && <View style={[styles.timelineLine, { height: '100%', top: 16 }]} />}
-                          
-                          {/* Sequential Number Circle */}
-                          <View style={[styles.numberNode, { backgroundColor: '#8C9BAB' }]}>
-                            <Typography variant="caption" bold color="#FFFFFF" style={styles.nodeText}>
-                              {currentIndex}
-                            </Typography>
-                          </View>
-                        </View>
-
-                        {/* Right Side Info Card */}
-                        <TouchableOpacity
-                          activeOpacity={0.8}
-                          onPress={() => {
-                            if (onSelectTopic) {
-                              onSelectTopic(activeCourse, topic);
-                            } else {
-                              callbacks.onSelectTopic?.(activeCourse, topic);
-                            }
-                          }}
-                          style={styles.cardTouchable}
-                        >
-                          <Card bordered style={styles.topicCard}>
-                            <View style={styles.cardMainRow}>
-                              
-                              {/* Left Text details */}
-                              <View style={styles.cardInfoCol}>
-                                <Typography variant="h3" bold color={theme.textPrimary} style={styles.cardTitle}>
-                                  {topic.title}
-                                </Typography>
-                                
-                                <View style={styles.ratingRow}>
-                                  <Icon name="star" size={14} color="#EAB308" />
-                                  <Typography variant="caption" bold color={theme.textPrimary} style={styles.ratingVal}>
-                                    {topic.rating || '4.5'}
-                                  </Typography>
-                                  <View style={styles.bulletSeparator} />
-                                  <Typography variant="caption" color={theme.textSecondary}>
-                                    {topic.totalQuestions} Questions
-                                  </Typography>
-                                </View>
-                              </View>
-                              
-                              {/* Right Badge / Lock option */}
-                              <View style={styles.cardBadgeCol}>
-                                {topic.isFree ? (
-                                  <View style={[styles.freeBadge, { borderColor: theme.primary }]}>
-                                    <Typography variant="caption" bold color={theme.primary} style={styles.freeBadgeText}>
-                                      FREE
-                                    </Typography>
-                                  </View>
-                                ) : topic.isLocked ? (
-                                  <View style={styles.lockContainer}>
-                                    <Icon name="lock" size={14} color={theme.textSecondary} />
-                                  </View>
-                                ) : null}
-                              </View>
-
-                            </View>
-                          </Card>
-                        </TouchableOpacity>
-
-                      </View>
-                    );
-                  })}
-                </View>
-              </View>
-            );
-          })}
-        </View>
-
-      </ScrollView>
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-  },
-  backButton: {
-    padding: 6,
-  },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '700',
-  },
-  searchButton: {
-    padding: 6,
-  },
-  scrollContent: {
-    paddingHorizontal: 16,
-    paddingBottom: 32,
-  },
-  subjectHeader: {
-    marginTop: 12,
-    marginBottom: 16,
-  },
-  subjectTitle: {
-    fontSize: 22,
-    marginBottom: 2,
-  },
-  tabsContainer: {
-    marginBottom: 16,
-  },
-  tabsScroll: {
-    paddingVertical: 4,
-  },
-  tabButton: {
-    paddingHorizontal: 16,
-    paddingVertical: 6,
-    borderRadius: 20,
-    marginRight: 10,
-  },
-  listContainer: {
-    marginTop: 8,
-  },
-  categoryBlock: {
-    marginBottom: 24,
-  },
-  categoryTitle: {
-    fontSize: 11,
-    letterSpacing: 0.8,
-    marginBottom: 16,
-  },
-  categoryItems: {
-    marginTop: 2,
-  },
-  timelineItemRow: {
-    flexDirection: 'row',
-    alignItems: 'stretch',
-    marginBottom: 12,
-    minHeight: 80,
-  },
-  timelineLeftColumn: {
-    width: 36,
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    paddingTop: 12,
-    position: 'relative',
-  },
-  timelineLine: {
-    position: 'absolute',
-    left: 17, // center of the 36 width
-    width: 2,
-    backgroundColor: '#E2E8F0',
-    zIndex: -1,
-  },
-  numberNode: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 1,
-  },
-  nodeText: {
-    fontSize: 11,
-  },
-  cardTouchable: {
-    flex: 1,
-  },
-  topicCard: {
-    padding: 12,
-    borderRadius: 12,
-    flex: 1,
-  },
-  cardMainRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    flex: 1,
-  },
-  cardInfoCol: {
-    flex: 1,
-    paddingRight: 8,
-  },
-  cardTitle: {
-    fontSize: 14,
-    lineHeight: 18,
-    marginBottom: 6,
-  },
-  ratingRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  ratingVal: {
-    fontSize: 11,
-    marginLeft: 4,
-  },
-  bulletSeparator: {
-    width: 3,
-    height: 3,
-    borderRadius: 1.5,
-    backgroundColor: '#94A3B8',
-    marginHorizontal: 6,
-  },
-  cardBadgeCol: {
-    justifyContent: 'center',
-    alignItems: 'flex-end',
-  },
-  freeBadge: {
-    borderWidth: 1.5,
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-  },
-  freeBadgeText: {
-    fontSize: 9,
-  },
-  lockContainer: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    backgroundColor: '#F1F5F9',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});

package/src/screens/pearlsMockData.ts

@@ -1,70 +0,0 @@
-import type { PearlTopic } from '../types';
-
-export const MOCK_PEARLS_TOPICS: PearlTopic[] = [
-  {
-    id: 'topic_head_neck',
-    title: 'Head and neck',
-    sections: {
-      'Head and Neck': [
-        {
-          id: 'hn_c1',
-          number: 1,
-          title: 'Classify sino-nasal neoplasam. Discuss the newer entities',
-          isFree: true,
-          bullets: [
-            'Benign Neoplasms: Benign sino-nasal tumors are generally slow-growing and less likely to invade surrounding structures. Common benign types include inverted papilloma, oncocytic Schneiderian papilloma, and fungiform papilloma, all of which originate from the Schneiderian mucosa. Inverted papilloma is notable for its local aggressiveness and high recurrence rate, sometimes exhibiting malignant transformation into squamous cell carcinoma.',
-            'Malignant Neoplasms: Malignant tumors of the sino-nasal tract are rare but clinically significant due to their aggressive behavior, late presentation, and complex anatomical constraints that limit surgical access. The most common malignant tumor is squamous cell carcinoma, often arising from dysplastic or papillomatous lesions.',
-            'Esthesioneuroblastoma: A notable entity originating from the olfactory epithelium and displaying variable degrees of malignancy. Additionally, melanoma, lymphoma, and undifferentiated carcinoma can also occur in the sino-nasal region, often presenting with nasal obstruction, epistaxis, and facial pain.'
-          ]
-        },
-        {
-          id: 'hn_c2',
-          number: 2,
-          title: 'Histologic variants of ameloblastoma',
-          isLocked: true,
-          bullets: [
-            'Ameloblastoma is a benign but locally aggressive odontogenic neoplasm.',
-            'Follicular and plexiform are the most common histologic patterns.',
-            'Unicystic variants have a better prognosis and lower recurrence rates.'
-          ]
-        },
-        {
-          id: 'hn_c3',
-          number: 3,
-          title: 'Role of brush ctology in diagnosis of oral cancerous and precancerous lessions',
-          isLocked: true,
-          bullets: [
-            'Oral brush cytology is a non-invasive screening aid.',
-            'High sensitivity for identifying cellular dysplasias.',
-            'Must be followed by scalpel biopsy for definitive diagnosis.'
-          ]
-        }
-      ],
-      'Eye': [
-        {
-          id: 'eye_c1',
-          number: 1,
-          title: 'Classify sino-nasal neoplasam. Discuss the newer entities',
-          isLocked: true,
-          bullets: []
-        },
-        {
-          id: 'eye_c2',
-          number: 2,
-          title: 'Histologic variants of ameloblastoma',
-          isLocked: true,
-          bullets: []
-        }
-      ]
-    }
-  },
-  { id: 'topic_brain_spine', title: 'Brain, Spine and Meninges', sections: {} },
-  { id: 'topic_breast', title: 'Breast Pathology', sections: {} },
-  { id: 'topic_skin', title: 'Skin and Connective Tissue', sections: {} },
-  { id: 'topic_kidney', title: 'Kidney & Urinary Tract', sections: {} },
-  { id: 'topic_gastro', title: 'Gastro-Intestinal System', sections: {} },
-  { id: 'topic_endocrine', title: 'Endocrine Pathology', sections: {} },
-  { id: 'topic_general', title: 'General Pathology', sections: {} },
-  { id: 'topic_male_genital', title: 'Male Genital System', sections: {} },
-  { id: 'topic_thoracic', title: 'Thoracic Pathology', sections: {} }
-];