react-native-elearn-ui 0.1.0

package/lib/typescript/src/types/index.d.ts

@@ -0,0 +1,107 @@
+export interface ThemeConfig {
+    primary: string;
+    secondary: string;
+    success: string;
+    danger: string;
+    warning: string;
+    background: string;
+    cardBackground: string;
+    textPrimary: string;
+    textSecondary: string;
+    textInverse: string;
+    border: string;
+    fontRegular?: string;
+    fontMedium?: string;
+    fontBold?: string;
+}
+export interface StringsConfig {
+    homeHeaderTitle?: string;
+    homeHeaderSubtitle?: string;
+    dailyQuizTitle?: string;
+    dailyQuizSubtitle?: string;
+    dailyQuizProgressLabel?: string;
+    trackQuickLabel?: string;
+    subjectsTitle?: string;
+    popularTopicsTitle?: string;
+    qbankTitle?: string;
+    qbankSubtitle?: string;
+    topicsLabel?: string;
+    questionsCountLabel?: string;
+    startQuizButton?: string;
+    topicsAndItemsLabel?: string;
+    infoTitle?: string;
+    questionLabel?: string;
+    explanationLabel?: string;
+    nextButtonLabel?: string;
+    submitButtonLabel?: string;
+    correctAnswerLabel?: string;
+    incorrectAnswerLabel?: string;
+    resultsTitle?: string;
+    resultsSubtitle?: string;
+    accuracyLabel?: string;
+    timeSpentLabel?: string;
+    correctAnswersCountLabel?: string;
+    reviewAnswersButton?: string;
+    goHomeButton?: string;
+    scorecardTitle?: string;
+}
+export interface Question {
+    id: string;
+    text: string;
+    imageUrl?: string;
+    options: string[];
+    correctOptionIndex: number;
+    explanation: string;
+}
+export interface Topic {
+    id: string;
+    title: string;
+    totalQuestions: number;
+    completedQuestions: number;
+    progress: number;
+    questions?: Question[];
+}
+export interface Course {
+    id: string;
+    title: string;
+    description?: string;
+    iconName?: string;
+    progress: number;
+    totalQuestions: number;
+    completedQuestions: number;
+    topics: Topic[];
+}
+export interface DailyQuizConfig {
+    id: string;
+    title: string;
+    description: string;
+    questionsCount: number;
+    progressPercentage: number;
+    questions: Question[];
+}
+export interface ElearnConfig {
+    theme?: Partial<ThemeConfig>;
+    strings?: Partial<StringsConfig>;
+    courses?: Course[];
+    dailyQuiz?: DailyQuizConfig;
+}
+export interface ElearnCallbacks {
+    onStartQuiz?: (quizId: string, questions: Question[], title: string) => void;
+    onSelectCourse?: (course: Course) => void;
+    onSelectTopic?: (course: Course, topic: Topic) => void;
+    onFinishQuiz?: (quizId: string, results: QuizResults) => void;
+    onBackToDashboard?: () => void;
+}
+export interface QuizResults {
+    quizId: string;
+    totalQuestions: number;
+    correctCount: number;
+    wrongCount: number;
+    skippedCount: number;
+    accuracy: number;
+    timeSpentSeconds: number;
+    userAnswers: {
+        [questionId: string]: number;
+    };
+}
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "react-native-elearn-ui",
+  "version": "0.1.0",
+  "description": "Enterprise E-Learning UI library for React Native",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "react-native-elearn-ui-source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-elearn-ui-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\""
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/harveedesigns/e_learn_pack.git"
+  },
+  "author": "Antigravity <antigravity@google.com> (https://github.com/harveedesigns)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/harveedesigns/e_learn_pack/issues"
+  },
+  "homepage": "https://github.com/harveedesigns/e_learn_pack#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@react-native/babel-preset": "0.85.0",
+    "@react-native/eslint-config": "0.85.0",
+    "@types/react": "^19.2.0",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "prettier": "^3.8.3",
+    "react": "19.2.0",
+    "react-native": "0.83.6",
+    "react-native-builder-bob": "^0.43.0",
+    "react-native-svg": "*",
+    "turbo": "^2.9.16",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-svg": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint"
+    ],
+    "version": "0.63.0"
+  }
+}

package/src/components/Button.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native';
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { useTheme } from '../context/ThemeContext';
+import { Typography } from './Typography';
+
+interface ButtonProps {
+  onPress: () => void;
+  title: string;
+  variant?: 'primary' | 'secondary' | 'outline';
+  disabled?: boolean;
+  loading?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  onPress,
+  title,
+  variant = 'primary',
+  disabled = false,
+  loading = false,
+  style,
+  textStyle,
+}) => {
+  const theme = useTheme();
+
+  const getButtonStyle = () => {
+    switch (variant) {
+      case 'primary':
+        return {
+          backgroundColor: theme.primary,
+        };
+      case 'secondary':
+        return {
+          backgroundColor: theme.secondary,
+        };
+      case 'outline':
+        return {
+          backgroundColor: 'transparent',
+          borderWidth: 1.5,
+          borderColor: theme.primary,
+        };
+      default:
+        return {};
+    }
+  };
+
+  const getTextColor = () => {
+    if (disabled) return theme.textSecondary;
+    switch (variant) {
+      case 'primary':
+        return theme.textInverse;
+      case 'secondary':
+      case 'outline':
+        return theme.primary;
+      default:
+        return theme.textInverse;
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={onPress}
+      disabled={disabled || loading}
+      style={[
+        styles.button,
+        getButtonStyle(),
+        disabled && { backgroundColor: theme.border, borderColor: theme.border },
+        style,
+      ]}
+    >
+      {loading ? (
+        <ActivityIndicator color={getTextColor()} />
+      ) : (
+        <Typography
+          variant="button"
+          color={getTextColor()}
+          style={[styles.text, textStyle]}
+        >
+          {title}
+        </Typography>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    height: 48,
+    borderRadius: 24, // Rounded pill design
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 24,
+    flexDirection: 'row',
+  },
+  text: {
+    letterSpacing: 0.2,
+  },
+});

package/src/components/Card.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../context/ThemeContext';
+
+interface CardProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  bordered?: boolean;
+  elevation?: number;
+}
+
+export const Card: React.FC<CardProps> = ({
+  children,
+  style,
+  onPress,
+  bordered = false,
+  elevation = 1,
+}) => {
+  const theme = useTheme();
+
+  const cardStyle = [
+    styles.card,
+    {
+      backgroundColor: theme.cardBackground,
+      borderColor: theme.border,
+      borderWidth: bordered ? 1 : 0,
+    },
+    elevation > 0 && {
+      shadowColor: '#0F172A',
+      shadowOffset: { width: 0, height: elevation * 2 },
+      shadowOpacity: 0.05 * elevation,
+      shadowRadius: elevation * 3,
+      elevation: elevation * 2,
+    },
+    style,
+  ];
+
+  if (onPress) {
+    return (
+      <TouchableOpacity activeOpacity={0.9} onPress={onPress} style={cardStyle}>
+        {children}
+      </TouchableOpacity>
+    );
+  }
+
+  return <View style={cardStyle}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 16,
+    padding: 16,
+    marginVertical: 8,
+  },
+});

package/src/components/CircularProgress.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { useTheme } from '../context/ThemeContext';
+import { Typography } from './Typography';
+
+interface CircularProgressProps {
+  progress: number; // 0 to 1
+  size?: number;
+  strokeWidth?: number;
+  color?: string;
+  backgroundColor?: string;
+  showText?: boolean;
+  textStyle?: StyleProp<TextStyle>;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const CircularProgress: React.FC<CircularProgressProps> = ({
+  progress,
+  size = 64,
+  strokeWidth = 6,
+  color,
+  backgroundColor,
+  showText = true,
+  textStyle,
+  style,
+}) => {
+  const theme = useTheme();
+  
+  const cappedProgress = Math.max(0, Math.min(1, progress));
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  const strokeDashoffset = circumference - cappedProgress * circumference;
+
+  const progressColor = color || theme.primary;
+  const bgStrokeColor = backgroundColor || theme.secondary;
+
+  return (
+    <View style={[styles.container, { width: size, height: size }, style]}>
+      <Svg width={size} height={size}>
+        <Circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke={bgStrokeColor}
+          strokeWidth={strokeWidth}
+          fill="transparent"
+        />
+        <Circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke={progressColor}
+          strokeWidth={strokeWidth}
+          fill="transparent"
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap="round"
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+        />
+      </Svg>
+      {showText && (
+        <View style={styles.textContainer}>
+          <Typography
+            variant="label"
+            bold
+            color={theme.textPrimary}
+            style={[styles.text, textStyle]}
+          >
+            {`${Math.round(cappedProgress * 100)}%`}
+          </Typography>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  textContainer: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    textAlign: 'center',
+  },
+});