react-native-elearn-ui 0.1.41 → 0.1.43

package/src/screens/notes/NotesDetailScreen.tsx

@@ -0,0 +1,260 @@
+import React from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useTheme } from '../../context/ThemeContext';
+import { Typography, Icon } from '../../components';
+import type { NotesDetailScreenProps } from '../../types';
+
+export const NotesDetailScreen: React.FC<NotesDetailScreenProps> = ({
+  topicTitle,
+  sectionTitle,
+  currentProgress,
+  totalProgress,
+  subTopicTitle,
+  content,
+  isCompleted = false,
+  onBack,
+  onPressGroup,
+  onToggleComplete,
+  onPressPrev,
+  onPressNext,
+}) => {
+  const theme = useTheme();
+
+  const progressPercentage = totalProgress > 0 ? (currentProgress / totalProgress) * 100 : 0;
+
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: '#FFFFFF' }]} edges={['top', 'bottom']}>
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity style={styles.headerBtnLeft} onPress={onBack}>
+          <Icon name="chevron-left" size={24} color={theme.textPrimary} />
+        </TouchableOpacity>
+        <Typography variant="h2" bold color={theme.textPrimary} style={styles.headerTitle}>
+          {topicTitle}
+        </Typography>
+        <TouchableOpacity style={styles.headerBtnRight} onPress={onPressGroup}>
+          <Icon name="users" size={20} color={theme.textPrimary} />
+        </TouchableOpacity>
+      </View>
+
+      {/* Progress Bar */}
+      <View style={styles.progressBarContainer}>
+        <View style={[styles.progressFill, { width: `${progressPercentage}%`, backgroundColor: theme.success }]} />
+      </View>
+
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        {/* Section Header */}
+        <View style={styles.sectionHeaderRow}>
+          <View style={styles.sectionHeaderLeft}>
+            <View style={[styles.dot, { backgroundColor: theme.success }]} />
+            <Typography variant="caption" color={theme.textSecondary} style={styles.sectionTitle}>
+              {sectionTitle}
+            </Typography>
+          </View>
+          <Typography variant="caption" color={theme.textPrimary} style={styles.progressText}>
+            {currentProgress}/{totalProgress}
+          </Typography>
+        </View>
+
+        {/* Sub Topic Title */}
+        <Typography variant="h3" color={theme.textPrimary} style={styles.subTopicTitle}>
+          {subTopicTitle}
+        </Typography>
+
+        {/* Content */}
+        <View style={styles.contentContainer}>
+          {content && content.map((item, index) => (
+            <View key={index} style={styles.bulletItem}>
+              <Typography variant="body" color={theme.textPrimary} style={styles.bulletDot}>
+                •
+              </Typography>
+              <Typography variant="body" color={theme.textSecondary} style={styles.bulletText}>
+                <Typography variant="body" bold color={theme.textPrimary}>
+                  {item.title}
+                </Typography>{' '}
+                {item.description}
+              </Typography>
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+
+      {/* Footer */}
+      <View style={styles.footer}>
+        <TouchableOpacity 
+          style={styles.completeToggle} 
+          activeOpacity={0.8}
+          onPress={() => onToggleComplete?.(!isCompleted)}
+        >
+          <View style={[
+            styles.checkbox,
+            { backgroundColor: isCompleted ? theme.success : '#FFFFFF', borderColor: isCompleted ? theme.success : '#D1D5DB' }
+          ]}>
+            {isCompleted && <Icon name="check" size={14} color="#FFFFFF" />}
+          </View>
+          <Typography variant="body" color={theme.textPrimary} style={styles.completeText}>
+            Mark as Complete
+          </Typography>
+        </TouchableOpacity>
+
+        <View style={styles.navButtons}>
+          <TouchableOpacity 
+            style={styles.navBtn} 
+            onPress={onPressPrev}
+          >
+            <Typography variant="body" bold color={theme.textSecondary}>
+              Prev
+            </Typography>
+          </TouchableOpacity>
+          <TouchableOpacity 
+            style={[styles.navBtn, styles.nextBtn, { backgroundColor: theme.success }]} 
+            onPress={onPressNext}
+          >
+            <Typography variant="body" bold color="#FFFFFF">
+              Next
+            </Typography>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#FFFFFF',
+  },
+  headerBtnLeft: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  headerBtnRight: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  headerTitle: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 18,
+  },
+  progressBarContainer: {
+    width: '100%',
+    height: 4,
+    backgroundColor: '#E2E8F0',
+  },
+  progressFill: {
+    height: '100%',
+  },
+  scrollContent: {
+    padding: 20,
+    paddingBottom: 40,
+  },
+  sectionHeaderRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 20,
+  },
+  sectionHeaderLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    marginRight: 8,
+  },
+  sectionTitle: {
+    fontSize: 12,
+    letterSpacing: 0.5,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+  },
+  progressText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  subTopicTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    lineHeight: 24,
+    marginBottom: 24,
+  },
+  contentContainer: {
+    width: '100%',
+  },
+  bulletItem: {
+    flexDirection: 'row',
+    marginBottom: 16,
+  },
+  bulletDot: {
+    marginRight: 8,
+    marginTop: -2,
+    fontSize: 16,
+  },
+  bulletText: {
+    flex: 1,
+    lineHeight: 22,
+    fontSize: 14,
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    backgroundColor: '#FFFFFF',
+    borderTopWidth: 1,
+    borderTopColor: '#F1F5F9',
+  },
+  completeToggle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  checkbox: {
+    width: 20,
+    height: 20,
+    borderRadius: 4,
+    borderWidth: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 10,
+  },
+  completeText: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  navButtons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  navBtn: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  nextBtn: {
+    borderRadius: 6,
+    marginLeft: 12,
+  },
+});

package/src/screens/notes/NotesSubTopicScreen.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useTheme } from '../../context/ThemeContext';
+import { Typography, Icon } from '../../components';
+import type { NotesSubTopicScreenProps, NotesSubTopicSection } from '../../types';
+
+export const NotesSubTopicScreen: React.FC<NotesSubTopicScreenProps> = ({
+  topicTitle,
+  sections,
+  onBack,
+  onPressFilter,
+  onPressSubTopic,
+}) => {
+  const theme = useTheme();
+
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: '#F9FAFB' }]} edges={['top', 'bottom']}>
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity style={styles.headerBtnLeft} onPress={onBack}>
+          <Icon name="chevron-left" size={24} color={theme.textPrimary} />
+        </TouchableOpacity>
+        <Typography variant="h2" bold color={theme.textPrimary} style={styles.headerTitle}>
+          {topicTitle}
+        </Typography>
+        <TouchableOpacity style={styles.headerBtnRight} onPress={onPressFilter}>
+          <Icon name="filter" size={20} color={theme.textPrimary} />
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        {sections && sections.map((section: NotesSubTopicSection) => (
+          <View key={section.id} style={styles.sectionContainer}>
+            <View style={styles.sectionHeader}>
+              <View style={[styles.dot, { backgroundColor: theme.success }]} />
+              <Typography variant="caption" color={theme.textSecondary} style={styles.sectionTitle}>
+                {section.title}
+              </Typography>
+            </View>
+
+            {section.subTopics.map((subTopic) => (
+              <TouchableOpacity
+                key={subTopic.id}
+                style={styles.subTopicCard}
+                activeOpacity={0.8}
+                onPress={() => onPressSubTopic?.(subTopic.id)}
+              >
+                <View style={styles.subTopicLeft}>
+                  <Typography variant="body" color={theme.textPrimary} style={styles.subTopicTitle}>
+                    {subTopic.title}
+                  </Typography>
+                </View>
+                <View style={styles.subTopicRight}>
+                  {subTopic.isLocked && (
+                    <View style={styles.lockIconContainer}>
+                      <Icon name="lock" size={14} color="#94A3B8" />
+                    </View>
+                  )}
+                </View>
+              </TouchableOpacity>
+            ))}
+          </View>
+        ))}
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#F1F5F9',
+  },
+  headerBtnLeft: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  headerBtnRight: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  headerTitle: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 18,
+  },
+  scrollContent: {
+    padding: 16,
+    paddingBottom: 40,
+  },
+  sectionContainer: {
+    marginBottom: 24,
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    marginRight: 8,
+  },
+  sectionTitle: {
+    fontSize: 12,
+    letterSpacing: 0.5,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+  },
+  subTopicCard: {
+    backgroundColor: '#FFFFFF',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    borderRadius: 12,
+    marginBottom: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+    borderWidth: 1,
+    borderColor: '#F1F5F9',
+  },
+  subTopicLeft: {
+    flex: 1,
+    paddingRight: 12,
+  },
+  subTopicTitle: {
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 20,
+  },
+  subTopicRight: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  lockIconContainer: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: '#F1F5F9',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/screens/notes/NotesTopicScreen.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useTheme } from '../../context/ThemeContext';
+import { Typography, Icon } from '../../components';
+import type { NotesTopicScreenProps, NotesTopic } from '../../types';
+
+export const NotesTopicScreen: React.FC<NotesTopicScreenProps> = ({
+  title = 'BNS/MD',
+  recentlyAdded,
+  allTopics,
+  onBack,
+  onPressSearch,
+  onPressTopic,
+}) => {
+  const theme = useTheme();
+
+  const renderTopicCard = (item: NotesTopic, isRecentlyAdded: boolean) => (
+    <TouchableOpacity
+      key={item.id}
+      style={styles.topicCard}
+      activeOpacity={0.8}
+      onPress={() => onPressTopic?.(item.id)}
+    >
+      <View style={styles.topicCardLeft}>
+        <View style={styles.iconContainer}>
+          <Icon name="file-text" size={20} color={theme.primary} />
+        </View>
+        <Typography variant="h3" color={theme.textPrimary} style={styles.topicTitle}>
+          {item.title}
+        </Typography>
+      </View>
+      <View style={styles.topicCardRight}>
+        {isRecentlyAdded && item.isCompleted ? (
+          <Icon name="check" size={20} color={theme.success} />
+        ) : (
+          <Icon name="chevron-right" size={20} color={theme.textSecondary} />
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: '#F9FAFB' }]} edges={['top', 'bottom']}>
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity style={styles.headerBtnLeft} onPress={onBack}>
+          <Icon name="chevron-left" size={24} color={theme.textPrimary} />
+        </TouchableOpacity>
+        <Typography variant="h2" bold color={theme.textPrimary} style={styles.headerTitle}>
+          {title}
+        </Typography>
+        <TouchableOpacity style={styles.headerBtnRight} onPress={onPressSearch}>
+          <Icon name="search" size={22} color={theme.textPrimary} />
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+        {/* Recently Added Section */}
+        {recentlyAdded && recentlyAdded.length > 0 && (
+          <View style={styles.section}>
+            <Typography variant="caption" color={theme.textSecondary} style={styles.sectionHeader}>
+              RECENTLY ADDED
+            </Typography>
+            {recentlyAdded.map((topic) => renderTopicCard(topic, true))}
+          </View>
+        )}
+
+        {/* All Topics Section */}
+        {allTopics && allTopics.length > 0 && (
+          <View style={[styles.section, { marginTop: 24 }]}>
+            <Typography variant="caption" color={theme.textSecondary} style={styles.sectionHeader}>
+              ALL TOPICS
+            </Typography>
+            {allTopics.map((topic) => renderTopicCard(topic, false))}
+          </View>
+        )}
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#F1F5F9',
+  },
+  headerBtnLeft: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  headerBtnRight: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  headerTitle: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 18,
+  },
+  scrollContent: {
+    padding: 16,
+    paddingBottom: 40,
+  },
+  section: {
+    width: '100%',
+  },
+  sectionHeader: {
+    fontSize: 12,
+    letterSpacing: 0.5,
+    marginBottom: 12,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+  },
+  topicCard: {
+    backgroundColor: '#FFFFFF',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    borderRadius: 12,
+    marginBottom: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+    borderWidth: 1,
+    borderColor: '#F1F5F9',
+  },
+  topicCardLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 8,
+    backgroundColor: '#F8FAFC',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 16,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+  },
+  topicTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  topicCardRight: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/screens/notes/index.ts

@@ -0,0 +1,3 @@
+export * from './NotesTopicScreen';
+export * from './NotesSubTopicScreen';
+export * from './NotesDetailScreen';

package/src/screens/qbank/QBankOverviewScreen.tsx

@@ -8,7 +8,7 @@ import {
   Platform,
   useWindowDimensions,
 } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { useTheme } from '../../context/ThemeContext';
 import { Typography, Icon } from '../../components';
 import type { QBankOverviewScreenProps, QBankOverviewQuestion } from '../../types';
@@ -30,7 +30,6 @@ export const QBankOverviewScreen: React.FC<QBankOverviewScreenProps> = ({
   const theme = useTheme();
   const [filter, setFilter] = useState<FilterType>('all');
   const [isSheetOpen, setIsSheetOpen] = useState(false);
-  const insets = useSafeAreaInsets();
   const { height: SCREEN_HEIGHT } = useWindowDimensions();
   
   // Animation value for Bottom Sheet
@@ -104,7 +103,7 @@ export const QBankOverviewScreen: React.FC<QBankOverviewScreenProps> = ({
   };
 
   return (
-    <View style={[styles.container, { paddingTop: insets.top }]}>
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
       {/* Header */}
       <View style={styles.header}>
         <TouchableOpacity onPress={onBack} style={styles.headerBtn}>
@@ -228,7 +227,7 @@ export const QBankOverviewScreen: React.FC<QBankOverviewScreenProps> = ({
           </TouchableOpacity>
         ))}
       </Animated.View>
-    </View>
+    </SafeAreaView>
   );
 };
 

package/src/types/index.ts

@@ -304,3 +304,64 @@ export interface QBankSubTopicParams {
   };
   sections: QBankSubTopicSection[];
 }
+
+// --------------------------------------------------
+// Notes Module Types
+// --------------------------------------------------
+
+export interface NotesTopic {
+  id: string;
+  title: string;
+  icon?: string;
+  isCompleted?: boolean;
+}
+
+export interface NotesTopicScreenProps {
+  title?: string;
+  recentlyAdded: NotesTopic[];
+  allTopics: NotesTopic[];
+  onBack?: () => void;
+  onPressSearch?: () => void;
+  onPressTopic?: (topicId: string) => void;
+}
+
+export interface NotesSubTopic {
+  id: string;
+  title: string; 
+  isLocked?: boolean;
+}
+
+export interface NotesSubTopicSection {
+  id: string;
+  title: string; 
+  subTopics: NotesSubTopic[];
+}
+
+export interface NotesSubTopicScreenProps {
+  topicTitle: string; 
+  sections: NotesSubTopicSection[];
+  onBack?: () => void;
+  onPressFilter?: () => void;
+  onPressSubTopic?: (subTopicId: string) => void;
+}
+
+export interface NotesDetailContent {
+  title: string;
+  description: string;
+}
+
+export interface NotesDetailScreenProps {
+  topicTitle: string;
+  sectionTitle: string;
+  currentProgress: number;
+  totalProgress: number;
+  subTopicTitle: string;
+  content: NotesDetailContent[];
+  isCompleted?: boolean;
+  onBack?: () => void;
+  onPressGroup?: () => void;
+  onToggleComplete?: (isComplete: boolean) => void;
+  onPressPrev?: () => void;
+  onPressNext?: () => void;
+}
+