react-native-elearn-ui 0.1.11 → 0.1.13

package/lib/typescript/src/screens/TopicListScreen.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import type { Course, Topic } from '../types/index.js';
-interface TopicListScreenProps {
-    course?: Course;
-    courseId?: string;
-    onBack: () => void;
-    hideHeader?: boolean;
-    onSelectTopic?: (course: Course, topic: Topic) => void;
-}
-export declare const TopicListScreen: React.FC<TopicListScreenProps>;
-export {};
-//# sourceMappingURL=TopicListScreen.d.ts.map

package/lib/typescript/src/screens/TopicListScreen.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TopicListScreen.d.ts","sourceRoot":"","sources":["../../../../src/screens/TopicListScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,OAAO,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,mBAAU,CAAC;AAK9C,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACxD;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsN1D,CAAC"}

package/lib/typescript/src/screens/pearlsMockData.d.ts

@@ -1,3 +0,0 @@
-import type { PearlTopic } from '../types/index.js';
-export declare const MOCK_PEARLS_TOPICS: PearlTopic[];
-//# sourceMappingURL=pearlsMockData.d.ts.map

package/lib/typescript/src/screens/pearlsMockData.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pearlsMockData.d.ts","sourceRoot":"","sources":["../../../../src/screens/pearlsMockData.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAU,CAAC;AAE3C,eAAO,MAAM,kBAAkB,EAAE,UAAU,EAmE1C,CAAC"}

package/src/screens/PearlChaptersScreen.tsx

@@ -1,330 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  StatusBar,
-  Modal,
-  Dimensions,
-} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { useTheme } from '../context/ThemeContext';
-import { Typography, Card, Icon } from '../components';
-import { MOCK_PEARLS_TOPICS } from './pearlsMockData';
-import type { PearlTopic, PearlChapter } from '../types';
-
-const { height: SCREEN_HEIGHT } = Dimensions.get('window');
-
-interface PearlChaptersScreenProps {
-  topic?: PearlTopic;
-  topicId?: string;
-  onBack: () => void;
-  hideHeader?: boolean;
-  onSelectChapter?: (topic: PearlTopic, chapter: PearlChapter) => void;
-  title?: string;
-}
-
-export const PearlChaptersScreen: React.FC<PearlChaptersScreenProps> = ({
-  topic,
-  topicId,
-  onBack,
-  hideHeader = false,
-  onSelectChapter,
-  title = 'Pearls',
-}) => {
-  const theme = useTheme();
-  const [bottomSheetVisible, setBottomSheetVisible] = useState(false);
-
-  const activeTopic = topic || MOCK_PEARLS_TOPICS.find((t) => t.id === topicId);
-
-  if (!activeTopic) {
-    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 }}>Topic 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>
-    );
-  }
-
-  const sections = Object.keys(activeTopic.sections || {});
-
-  // --- Render bottom sheet overlay for topics filter ---
-  const renderBottomSheet = () => {
-    const list = [
-      { name: 'Vertebral Curves', count: 25 },
-      { name: 'Introduction', count: 15 },
-      { name: 'Definition and scope', count: 15 },
-      { name: 'Branches of anatomy', count: 5 },
-      { name: 'Anatomical terminology', count: 23 },
-      { name: 'Anatomical positions', count: 25 },
-      { name: 'CSF', count: 15 },
-      { name: 'Levels of structural organization', count: 15 },
-      { name: 'Systems of the human body overview', count: 5 },
-      { name: 'Tissue types', count: 23 },
-    ];
-
-    return (
-      <Modal
-        visible={bottomSheetVisible}
-        transparent
-        animationType="slide"
-        onRequestClose={() => setBottomSheetVisible(false)}
-      >
-        <View style={styles.sheetOverlay}>
-          {/* Backdrop click closer */}
-          <TouchableOpacity
-            activeOpacity={1}
-            style={styles.sheetBackdrop}
-            onPress={() => setBottomSheetVisible(false)}
-          />
-          
-          <View style={styles.sheetContent}>
-            {/* Grabber indicator bar */}
-            <View style={styles.sheetGrabber} />
-
-            <View style={styles.sheetHeader}>
-              <Typography variant="h2" bold color={theme.textPrimary}>
-                {activeTopic.title}
-              </Typography>
-            </View>
-
-            <ScrollView contentContainerStyle={styles.sheetScroll}>
-              {list.map((item, idx) => (
-                <TouchableOpacity
-                  key={idx}
-                  style={styles.sheetItemRow}
-                  onPress={() => {
-                    setBottomSheetVisible(false);
-                  }}
-                >
-                  <Typography variant="body" color={theme.textPrimary}>
-                    {item.name}
-                  </Typography>
-                  <Typography variant="caption" color={theme.textSecondary}>
-                    {item.count} Modules
-                  </Typography>
-                </TouchableOpacity>
-              ))}
-            </ScrollView>
-          </View>
-        </View>
-      </Modal>
-    );
-  };
-
-  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}>
-            {title}
-          </Typography>
-
-          <TouchableOpacity onPress={() => setBottomSheetVisible(true)} style={styles.headerRightBtn}>
-            <Icon name="list" size={20} color={theme.textPrimary} />
-          </TouchableOpacity>
-        </View>
-      )}
-
-      {/* Chapters list view */}
-      <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
-        {sections.map((sectionName) => {
-          const list = activeTopic.sections?.[sectionName] || [];
-          return (
-            <View key={sectionName} style={styles.sectionBlock}>
-              <Typography variant="h2" bold color={theme.textPrimary} style={styles.sectionHeading}>
-                {sectionName}
-              </Typography>
-
-              <View style={styles.chaptersList}>
-                {list.map((chapter) => (
-                  <TouchableOpacity
-                    key={chapter.id}
-                    activeOpacity={0.8}
-                    onPress={() => onSelectChapter?.(activeTopic, chapter)}
-                    disabled={chapter.isLocked}
-                  >
-                    <Card bordered style={styles.chapterCard}>
-                      <View style={styles.chapterRow}>
-                        {/* Left sequential index */}
-                        <Typography variant="body" bold color={theme.textSecondary} style={styles.chapterNumber}>
-                          {chapter.number}
-                        </Typography>
-
-                        {/* Middle Text */}
-                        <Typography variant="body" color={theme.textPrimary} style={styles.chapterTitle}>
-                          {chapter.title}
-                        </Typography>
-
-                        {/* Right locks/free badges */}
-                        <View style={styles.chapterBadgeCol}>
-                          {chapter.isFree ? (
-                            <View style={[styles.freeBadge, { borderColor: theme.primary }]}>
-                              <Typography variant="caption" bold color={theme.primary} style={styles.freeText}>
-                                FREE
-                              </Typography>
-                            </View>
-                          ) : chapter.isLocked ? (
-                            <View style={styles.lockCircle}>
-                              <Icon name="lock" size={12} color={theme.textSecondary} />
-                            </View>
-                          ) : null}
-                        </View>
-                      </View>
-                    </Card>
-                  </TouchableOpacity>
-                ))}
-              </View>
-            </View>
-          );
-        })}
-      </ScrollView>
-
-      {/* Bottom Filter Sheet */}
-      {renderBottomSheet()}
-    </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',
-  },
-  headerRightBtn: {
-    padding: 6,
-  },
-  scrollContent: {
-    paddingHorizontal: 16,
-    paddingTop: 8,
-    paddingBottom: 24,
-  },
-  sectionBlock: {
-    marginBottom: 20,
-  },
-  sectionHeading: {
-    fontSize: 16,
-    marginBottom: 12,
-  },
-  chaptersList: {
-    marginTop: 2,
-  },
-  chapterCard: {
-    padding: 12,
-    marginBottom: 10,
-    borderRadius: 12,
-  },
-  chapterRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  chapterNumber: {
-    fontSize: 14,
-    width: 24,
-    textAlign: 'center',
-    marginRight: 8,
-  },
-  chapterTitle: {
-    flex: 1,
-    fontSize: 14,
-    lineHeight: 18,
-  },
-  chapterBadgeCol: {
-    justifyContent: 'center',
-    alignItems: 'flex-end',
-    marginLeft: 8,
-  },
-  freeBadge: {
-    borderWidth: 1.5,
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-  },
-  freeText: {
-    fontSize: 9,
-  },
-  lockCircle: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    backgroundColor: '#F1F5F9',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  // Bottom Sheet styling
-  sheetOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.4)',
-    justifyContent: 'flex-end',
-  },
-  sheetBackdrop: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  sheetContent: {
-    backgroundColor: '#FFFFFF',
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    maxHeight: SCREEN_HEIGHT * 0.7,
-    paddingBottom: 20,
-  },
-  sheetGrabber: {
-    width: 40,
-    height: 4,
-    backgroundColor: '#E2E8F0',
-    borderRadius: 2,
-    alignSelf: 'center',
-    marginTop: 8,
-    marginBottom: 16,
-  },
-  sheetHeader: {
-    paddingHorizontal: 20,
-    paddingBottom: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: '#F1F5F9',
-  },
-  sheetScroll: {
-    paddingHorizontal: 20,
-    paddingVertical: 8,
-  },
-  sheetItemRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingVertical: 14,
-    borderBottomWidth: 1,
-    borderBottomColor: '#F8FAFC',
-  },
-});

package/src/screens/PearlReaderScreen.tsx

@@ -1,306 +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 { useTheme } from '../context/ThemeContext';
-import { Typography, Icon } from '../components';
-import { MOCK_PEARLS_TOPICS } from './pearlsMockData';
-import type { PearlTopic, PearlChapter } from '../types';
-
-interface PearlReaderScreenProps {
-  topic?: PearlTopic;
-  topicId?: string;
-  chapter?: PearlChapter;
-  chapterId?: string;
-  onBack: () => void;
-  hideHeader?: boolean;
-  title?: string;
-}
-
-export const PearlReaderScreen: React.FC<PearlReaderScreenProps> = ({
-  topic,
-  topicId,
-  chapter,
-  chapterId,
-  onBack,
-  hideHeader = false,
-  title = 'Pearls',
-}) => {
-  const theme = useTheme();
-
-  const activeTopic = topic || MOCK_PEARLS_TOPICS.find((t) => t.id === topicId);
-
-  // Flatten chapters for reader mode navigation
-  const flattenedChapters: PearlChapter[] = [];
-  if (activeTopic && activeTopic.sections) {
-    Object.keys(activeTopic.sections).forEach((sectionName) => {
-      const sectionChapters = activeTopic.sections?.[sectionName] || [];
-      flattenedChapters.push(...sectionChapters);
-    });
-  }
-
-  const initialIndex = chapterId
-    ? flattenedChapters.findIndex((c) => c.id === chapterId)
-    : chapter
-      ? flattenedChapters.findIndex((c) => c.id === chapter.id)
-      : 0;
-
-  const [activeChapterIndex, setActiveChapterIndex] = useState<number>(initialIndex >= 0 ? initialIndex : 0);
-  const [isCompleted, setIsCompleted] = useState(false);
-
-  const activeChapter = flattenedChapters[activeChapterIndex];
-
-  if (!activeChapter) {
-    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 }}>Chapter 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>
-    );
-  }
-
-  const handlePrevChapter = () => {
-    if (activeChapterIndex > 0) {
-      setActiveChapterIndex(activeChapterIndex - 1);
-      setIsCompleted(false);
-    }
-  };
-
-  const handleNextChapter = () => {
-    if (activeChapterIndex < flattenedChapters.length - 1) {
-      setActiveChapterIndex(activeChapterIndex + 1);
-      setIsCompleted(false);
-    }
-  };
-
-  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}>
-            {title}
-          </Typography>
-
-          <View style={styles.headerRightPlaceholder} />
-        </View>
-      )}
-
-      {/* Reader Container */}
-      <View style={styles.readerContainer}>
-        {/* Subheader progress banner */}
-        <View style={styles.readerSubHeader}>
-          <Typography variant="body" bold color={theme.textPrimary} style={styles.readerSubTitle}>
-            {activeChapter.title.split('.')[0] || activeChapter.title}
-          </Typography>
-          <Typography variant="body" bold color={theme.textSecondary}>
-            {activeChapterIndex + 1}/{flattenedChapters.length}
-          </Typography>
-        </View>
-
-        <ScrollView contentContainerStyle={styles.readerScroll} showsVerticalScrollIndicator={false}>
-          {activeChapter.bullets.map((bullet, idx) => {
-            const parts = bullet.split(':');
-            const boldPart = parts[0];
-            const rest = parts.slice(1).join(':');
-
-            return (
-              <View key={idx} style={styles.bulletRow}>
-                <Typography variant="body" color={theme.textPrimary} style={styles.bulletPointDot}>
-                  •
-                </Typography>
-                <Typography variant="body" color={theme.textPrimary} style={styles.bulletText}>
-                  {rest ? (
-                    <>
-                      <Typography variant="body" bold>{boldPart}:</Typography>
-                      {rest}
-                    </>
-                  ) : (
-                    bullet
-                  )}
-                </Typography>
-              </View>
-            );
-          })}
-        </ScrollView>
-
-        {/* Checkbox status bar */}
-        <View style={styles.checkboxBar}>
-          <TouchableOpacity
-            activeOpacity={0.8}
-            onPress={() => setIsCompleted(!isCompleted)}
-            style={styles.checkboxRow}
-          >
-            <View style={[
-              styles.checkboxBox,
-              { borderColor: theme.border },
-              isCompleted && { backgroundColor: theme.primary, borderColor: theme.primary }
-            ]}>
-              {isCompleted && <View style={styles.checkboxInner} />}
-            </View>
-            <Typography variant="body" bold color={theme.textPrimary}>
-              Mark as Complete
-            </Typography>
-          </TouchableOpacity>
-        </View>
-
-        {/* Navigation bottom buttons */}
-        <View style={styles.footerRow}>
-          <TouchableOpacity
-            onPress={handlePrevChapter}
-            disabled={activeChapterIndex === 0}
-            style={[styles.footerBtn, activeChapterIndex === 0 && { opacity: 0.4 }]}
-          >
-            <Typography variant="body" bold color={theme.textPrimary}>
-              Prev
-            </Typography>
-          </TouchableOpacity>
-
-          <TouchableOpacity
-            onPress={handleNextChapter}
-            disabled={activeChapterIndex === flattenedChapters.length - 1}
-            style={[
-              styles.nextActionBtn,
-              { backgroundColor: theme.primary },
-              activeChapterIndex === flattenedChapters.length - 1 && { opacity: 0.4 }
-            ]}
-          >
-            <Typography variant="body" bold color="#FFFFFF">
-              Next
-            </Typography>
-          </TouchableOpacity>
-        </View>
-      </View>
-    </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',
-  },
-  headerRightPlaceholder: {
-    width: 32,
-  },
-  readerContainer: {
-    flex: 1,
-  },
-  readerSubHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: '#E2E8F0',
-  },
-  readerSubTitle: {
-    flex: 1,
-    fontSize: 14,
-    marginRight: 16,
-  },
-  readerScroll: {
-    paddingHorizontal: 16,
-    paddingVertical: 16,
-  },
-  bulletRow: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    marginBottom: 16,
-  },
-  bulletPointDot: {
-    fontSize: 18,
-    marginRight: 10,
-    lineHeight: 20,
-  },
-  bulletText: {
-    flex: 1,
-    fontSize: 14,
-    lineHeight: 22,
-  },
-  checkboxBar: {
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    borderTopWidth: 1,
-    borderTopColor: '#E2E8F0',
-    backgroundColor: '#F8FAFC',
-  },
-  checkboxRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  checkboxBox: {
-    width: 20,
-    height: 20,
-    borderWidth: 2,
-    borderRadius: 4,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 10,
-  },
-  checkboxInner: {
-    width: 10,
-    height: 10,
-    borderRadius: 2,
-    backgroundColor: '#FFFFFF',
-  },
-  footerRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    backgroundColor: '#FFFFFF',
-    borderTopWidth: 1,
-    borderTopColor: '#E2E8F0',
-    justifyContent: 'space-between',
-  },
-  footerBtn: {
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-  },
-  nextActionBtn: {
-    paddingHorizontal: 24,
-    paddingVertical: 10,
-    borderRadius: 8,
-    minWidth: 80,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});