react-native-elearn-ui 0.1.8 → 0.1.10

package/src/screens/PearlChaptersScreen.tsx

@@ -0,0 +1,328 @@
+import React, { useState } from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  SafeAreaView,
+  StatusBar,
+  Modal,
+  Dimensions,
+} from 'react-native';
+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;
+}
+
+export const PearlChaptersScreen: React.FC<PearlChaptersScreenProps> = ({
+  topic,
+  topicId,
+  onBack,
+  hideHeader = false,
+  onSelectChapter,
+}) => {
+  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}>
+            Pearls
+          </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

@@ -0,0 +1,304 @@
+import React, { useState } from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  SafeAreaView,
+  StatusBar,
+} from 'react-native';
+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;
+}
+
+export const PearlReaderScreen: React.FC<PearlReaderScreenProps> = ({
+  topic,
+  topicId,
+  chapter,
+  chapterId,
+  onBack,
+  hideHeader = false,
+}) => {
+  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}>
+            Pearls
+          </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',
+  },
+});