react-native-elearn-ui 0.1.0

package/src/components/Icon.tsx

@@ -0,0 +1,338 @@
+import React from 'react';
+import Svg, { Path, Circle, G } from 'react-native-svg';
+import { useTheme } from '../context/ThemeContext';
+
+export type IconName =
+  | 'bell'
+  | 'user'
+  | 'chevron-right'
+  | 'chevron-left'
+  | 'arrow-left'
+  | 'book-open'
+  | 'check-circle'
+  | 'x-circle'
+  | 'clock'
+  | 'award'
+  | 'search'
+  | 'flask' // Chemistry
+  | 'atom' // Physics
+  | 'dna' // Biology
+  | 'folder' // Subject folder
+  | 'info'
+  | 'play'
+  | 'star';
+
+interface IconProps {
+  name: IconName;
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+export const Icon: React.FC<IconProps> = ({
+  name,
+  size = 24,
+  color,
+  strokeWidth = 2,
+}) => {
+  const theme = useTheme();
+  const iconColor = color || theme.textPrimary;
+
+  const renderIconContent = () => {
+    switch (name) {
+      case 'bell':
+        return (
+          <Path
+            d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0"
+            stroke={iconColor}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        );
+      case 'user':
+        return (
+          <G>
+            <Path
+              d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+            <Circle
+              cx="12"
+              cy="7"
+              r="4"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+          </G>
+        );
+      case 'chevron-right':
+        return (
+          <Path
+            d="M9 18l6-6-6-6"
+            stroke={iconColor}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        );
+      case 'chevron-left':
+        return (
+          <Path
+            d="M15 18l-6-6 6-6"
+            stroke={iconColor}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        );
+      case 'arrow-left':
+        return (
+          <Path
+            d="M19 12H5M12 19l-7-7 7-7"
+            stroke={iconColor}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        );
+      case 'book-open':
+        return (
+          <Path
+            d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"
+            stroke={iconColor}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        );
+      case 'check-circle':
+        return (
+          <G>
+            <Circle
+              cx="12"
+              cy="12"
+              r="10"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              fill="none"
+            />
+            <Path
+              d="M9 11l3 3 6-6"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+          </G>
+        );
+      case 'x-circle':
+        return (
+          <G>
+            <Circle
+              cx="12"
+              cy="12"
+              r="10"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              fill="none"
+            />
+            <Path
+              d="M15 9l-6 6M9 9l6 6"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+          </G>
+        );
+      case 'clock':
+        return (
+          <G>
+            <Circle
+              cx="12"
+              cy="12"
+              r="10"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              fill="none"
+            />
+            <Path
+              d="M12 6v6l4 2"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+          </G>
+        );
+      case 'award':
+        return (
+          <G>
+            <Circle
+              cx="12"
+              cy="8"
+              r="7"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              fill="none"
+            />
+            <Path
+              d="M8.21 13.89L7 23l5-3 5 3-1.21-9.12"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+          </G>
+        );
+      case 'search':
+        return (
+          <G>
+            <Circle
+              cx="11"
+              cy="11"
+              r="8"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              fill="none"
+            />
+            <Path
+              d="M21 21l-4.35-4.35"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+          </G>
+        );
+      case 'flask':
+        return (
+          <Path
+            d="M6 3h12M12 3v11M9 3v11M15 3v11M10 9h4M12 21a7 7 0 0 1-7-7c0-2 1-3.9 3-5V3h8v6c2 1.1 3 3 3 5a7 7 0 0 1-7 7z"
+            stroke={iconColor}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        );
+      case 'atom':
+        return (
+          <G>
+            <Circle
+              cx="12"
+              cy="12"
+              r="2"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              fill={iconColor}
+            />
+            <Path
+              d="M12 22C4 22 2 17 2 12S4 2 12 2s10 5 10 10-2 10-10 10z"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              strokeDasharray="4 4"
+              fill="none"
+            />
+            <Path
+              d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              fill="none"
+            />
+          </G>
+        );
+      case 'dna':
+        return (
+          <Path
+            d="M4.5 10.5C6 12 8 13.5 10 15s4.5 3 6.5 4.5M19.5 4.5C18 3 16 1.5 14 0s-4.5 1.5-6.5 3M4.5 4.5c3 3 6 6 9 9m-9 0c3-3 6-6 9-9M12 12l2.5 2.5m-5 0L12 12"
+            stroke={iconColor}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        );
+      case 'folder':
+        return (
+          <Path
+            d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
+            stroke={iconColor}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        );
+      case 'info':
+        return (
+          <G>
+            <Circle
+              cx="12"
+              cy="12"
+              r="10"
+              stroke={iconColor}
+              strokeWidth={strokeWidth}
+              fill="none"
+            />
+            <Path
+              d="M12 16v-4M12 8h.01"
+              stroke={iconColor}
+              strokeWidth={strokeWidth + 0.5}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+          </G>
+        );
+      case 'play':
+        return (
+          <Path
+            d="M5 3l14 9-14 9V3z"
+            stroke={iconColor}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        );
+      case 'star':
+        return (
+          <Path
+            d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+            stroke={iconColor}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24">
+      {renderIconContent()}
+    </Svg>
+  );
+};

package/src/components/ProgressBar.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../context/ThemeContext';
+
+interface ProgressBarProps {
+  progress: number; // 0 to 1
+  color?: string;
+  height?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const ProgressBar: React.FC<ProgressBarProps> = ({
+  progress,
+  color,
+  height = 8,
+  style,
+}) => {
+  const theme = useTheme();
+  const cappedProgress = Math.max(0, Math.min(1, progress));
+
+  return (
+    <View style={[styles.container, { height, backgroundColor: theme.border }, style]}>
+      <View
+        style={[
+          styles.fill,
+          {
+            width: `${cappedProgress * 100}%`,
+            backgroundColor: color || theme.primary,
+            borderRadius: height / 2,
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    borderRadius: 999,
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+  },
+});

package/src/components/Typography.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Text } from 'react-native';
+import type { TextProps } from 'react-native';
+import { useTheme } from '../context/ThemeContext';
+
+interface TypographyProps extends TextProps {
+  variant?: 'h1' | 'h2' | 'h3' | 'body' | 'bodyLight' | 'caption' | 'button' | 'label';
+  color?: string;
+  align?: 'auto' | 'left' | 'right' | 'center' | 'justify';
+  bold?: boolean;
+  medium?: boolean;
+}
+
+export const Typography: React.FC<TypographyProps> = ({
+  variant = 'body',
+  color,
+  align = 'auto',
+  bold = false,
+  medium = false,
+  style,
+  children,
+  ...props
+}) => {
+  const theme = useTheme();
+
+  const getStyleForVariant = () => {
+    switch (variant) {
+      case 'h1':
+        return {
+          fontSize: 24,
+          lineHeight: 32,
+          fontWeight: '700' as const,
+          fontFamily: theme.fontBold,
+        };
+      case 'h2':
+        return {
+          fontSize: 18,
+          lineHeight: 24,
+          fontWeight: '600' as const,
+          fontFamily: theme.fontMedium,
+        };
+      case 'h3':
+        return {
+          fontSize: 16,
+          lineHeight: 22,
+          fontWeight: '600' as const,
+          fontFamily: theme.fontMedium,
+        };
+      case 'body':
+        return {
+          fontSize: 14,
+          lineHeight: 20,
+          fontWeight: '400' as const,
+          fontFamily: theme.fontRegular,
+        };
+      case 'bodyLight':
+        return {
+          fontSize: 14,
+          lineHeight: 20,
+          fontWeight: '300' as const,
+          fontFamily: theme.fontRegular,
+        };
+      case 'caption':
+        return {
+          fontSize: 12,
+          lineHeight: 16,
+          fontWeight: '400' as const,
+          fontFamily: theme.fontRegular,
+        };
+      case 'button':
+        return {
+          fontSize: 15,
+          lineHeight: 20,
+          fontWeight: '600' as const,
+          fontFamily: theme.fontMedium,
+        };
+      case 'label':
+        return {
+          fontSize: 13,
+          lineHeight: 18,
+          fontWeight: '500' as const,
+          fontFamily: theme.fontMedium,
+        };
+      default:
+        return {};
+    }
+  };
+
+  const defaultColor = () => {
+    if (variant === 'caption' || variant === 'bodyLight') {
+      return theme.textSecondary;
+    }
+    return theme.textPrimary;
+  };
+
+  const textStyle = [
+    getStyleForVariant(),
+    {
+      color: color || defaultColor(),
+      textAlign: align,
+    },
+    bold && { fontWeight: '700' as const, fontFamily: theme.fontBold },
+    medium && { fontWeight: '500' as const, fontFamily: theme.fontMedium },
+    style,
+  ];
+
+  return (
+    <Text style={textStyle} {...props}>
+      {children}
+    </Text>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export { Typography } from './Typography';
+export { Button } from './Button';
+export { Card } from './Card';
+export { ProgressBar } from './ProgressBar';
+export { CircularProgress } from './CircularProgress';
+export { Icon } from './Icon';
+export type { IconName } from './Icon';
+export { DEFAULT_THEME, useTheme, ThemeProvider } from '../context/ThemeContext';

package/src/context/ElearnConfigContext.tsx

@@ -0,0 +1,90 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import type { ElearnConfig, ElearnCallbacks, StringsConfig, Course, DailyQuizConfig } from '../types';
+import { ThemeProvider } from './ThemeContext';
+
+export const DEFAULT_STRINGS: Required<StringsConfig> = {
+  homeHeaderTitle: "Ready to learn?",
+  homeHeaderSubtitle: "Practice daily & improve scores",
+  dailyQuizTitle: "One step learnings - Daily quiz",
+  dailyQuizSubtitle: "Attempt daily prep check!",
+  dailyQuizProgressLabel: "Track Progress",
+  trackQuickLabel: "Track Quick",
+  subjectsTitle: "Subjects",
+  popularTopicsTitle: "Popular Topics",
+  qbankTitle: "Qbank",
+  qbankSubtitle: "All subjects folder & question bank",
+  topicsLabel: "Topics",
+  questionsCountLabel: "Questions",
+  startQuizButton: "Start QBank",
+  topicsAndItemsLabel: "Topics and items",
+  infoTitle: "Info",
+  questionLabel: "Question",
+  explanationLabel: "Explanation",
+  nextButtonLabel: "Next",
+  submitButtonLabel: "Submit",
+  correctAnswerLabel: "Correct Answer",
+  incorrectAnswerLabel: "Incorrect Answer",
+  resultsTitle: "QBank Analysis",
+  resultsSubtitle: "Here is your QBank performance summary!",
+  accuracyLabel: "Accuracy",
+  timeSpentLabel: "Time Spent",
+  correctAnswersCountLabel: "Correct Answers",
+  reviewAnswersButton: "Review Answers",
+  goHomeButton: "Back to Dashboard",
+  scorecardTitle: "Quiz Analysis",
+};
+
+interface ConfigContextValue {
+  config: ElearnConfig;
+  callbacks: ElearnCallbacks;
+  getString: (key: keyof StringsConfig) => string;
+  getCourses: () => Course[];
+  getDailyQuiz: () => DailyQuizConfig | undefined;
+}
+
+const ConfigContext = createContext<ConfigContextValue | null>(null);
+
+interface ElearnConfigProviderProps {
+  config?: ElearnConfig;
+  callbacks?: ElearnCallbacks;
+  children: React.ReactNode;
+}
+
+export const ElearnConfigProvider: React.FC<ElearnConfigProviderProps> = ({
+  config = {},
+  callbacks = {},
+  children,
+}) => {
+  const mergedStrings = useMemo(() => {
+    return { ...DEFAULT_STRINGS, ...config.strings };
+  }, [config.strings]);
+
+  const value = useMemo<ConfigContextValue>(() => {
+    return {
+      config,
+      callbacks,
+      getString: (key) => mergedStrings[key] || DEFAULT_STRINGS[key] || '',
+      getCourses: () => config.courses || [],
+      getDailyQuiz: () => config.dailyQuiz,
+    };
+  }, [config, callbacks, mergedStrings]);
+
+  return (
+    <ConfigContext.Provider value={value}>
+      <ThemeProvider theme={config.theme}>
+        {children}
+      </ThemeProvider>
+    </ConfigContext.Provider>
+  );
+};
+
+export const useElearnConfig = () => {
+  const context = useContext(ConfigContext);
+  if (!context) {
+    throw new Error('useElearnConfig must be used within an ElearnConfigProvider');
+  }
+  return context;
+};
+export { ThemeProvider };
+export { useTheme } from './ThemeContext';
+export { DEFAULT_THEME } from './ThemeContext';

package/src/context/ThemeContext.tsx

@@ -0,0 +1,37 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import type { ThemeConfig } from '../types';
+
+export const DEFAULT_THEME: ThemeConfig = {
+  primary: '#007A87', // Dark Teal
+  secondary: '#E6F4F5', // Soft Teal Accent
+  success: '#10B981', // Emerald Green for correct answers
+  danger: '#EF4444', // Red for incorrect answers
+  warning: '#F59E0B', // Amber
+  background: '#F8FAFC', // Sleek slate grey-white background
+  cardBackground: '#FFFFFF', // Pure White
+  textPrimary: '#1E293B', // Slate 800
+  textSecondary: '#64748B', // Slate 500
+  textInverse: '#FFFFFF', // White
+  border: '#E2E8F0', // Slate 200
+};
+
+const ThemeContext = createContext<ThemeConfig>(DEFAULT_THEME);
+
+interface ThemeProviderProps {
+  theme?: Partial<ThemeConfig>;
+  children: React.ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {
+  const mergedTheme = useMemo(() => {
+    return { ...DEFAULT_THEME, ...theme };
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={mergedTheme}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => useContext(ThemeContext);

package/src/index.tsx

@@ -0,0 +1,33 @@
+// Types export
+export * from './types';
+
+// Contexts & Providers
+export {
+  ElearnConfigProvider,
+  useElearnConfig,
+  ThemeProvider,
+  useTheme,
+  DEFAULT_THEME,
+  DEFAULT_STRINGS,
+} from './context/ElearnConfigContext';
+
+// Atomic Components
+export {
+  Typography,
+  Button,
+  Card,
+  ProgressBar,
+  CircularProgress,
+  Icon,
+} from './components';
+export type { IconName } from './components';
+
+// Screens
+export {
+  HomeScreen,
+  QbankScreen,
+  TopicListScreen,
+  QuizStartScreen,
+  QuestionScreen,
+  ResultScreen,
+} from './screens';

package/src/multiply.tsx

@@ -0,0 +1,3 @@
+export function multiply(a: number, b: number): number {
+  return a * b;
+}