@umituz/react-native-gamification 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-gamification",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Generic gamification system for React Native apps - achievements, points, levels, streaks with customizable UI components",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/AchievementItem.tsx

@@ -0,0 +1,182 @@
+/**
+ * AchievementItem Component
+ * List item for achievements - all text via props
+ */
+
+import React from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  type ViewStyle,
+  type TextStyle,
+} from "react-native";
+
+export interface AchievementItemProps {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  isUnlocked: boolean;
+  progress: number;
+  threshold: number;
+  progressLabel?: string;
+  // Customization
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  descriptionStyle?: TextStyle;
+  // Colors
+  accentColor?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  subtextColor?: string;
+  lockedOpacity?: number;
+}
+
+export const AchievementItem: React.FC<AchievementItemProps> = ({
+  title,
+  description,
+  icon,
+  isUnlocked,
+  progress,
+  threshold,
+  progressLabel,
+  containerStyle,
+  titleStyle,
+  descriptionStyle,
+  accentColor = "#FFD700",
+  backgroundColor = "#1A1A1A",
+  textColor = "#FFFFFF",
+  subtextColor = "#888888",
+  lockedOpacity = 0.5,
+}) => {
+  const progressPercent = Math.min((progress / threshold) * 100, 100);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor, opacity: isUnlocked ? 1 : lockedOpacity },
+        containerStyle,
+      ]}
+    >
+      <View
+        style={[styles.iconContainer, { backgroundColor: `${accentColor}20` }]}
+      >
+        {icon}
+      </View>
+
+      <View style={styles.content}>
+        <View style={styles.header}>
+          <Text style={[styles.title, { color: textColor }, titleStyle]}>
+            {title}
+          </Text>
+          {isUnlocked && (
+            <View style={[styles.checkmark, { backgroundColor: accentColor }]}>
+              <Text style={styles.checkmarkText}>✓</Text>
+            </View>
+          )}
+        </View>
+
+        <Text
+          style={[styles.description, { color: subtextColor }, descriptionStyle]}
+          numberOfLines={2}
+        >
+          {description}
+        </Text>
+
+        {!isUnlocked && (
+          <View style={styles.progressContainer}>
+            <View
+              style={[styles.progressBar, { backgroundColor: `${accentColor}30` }]}
+            >
+              <View
+                style={[
+                  styles.progressFill,
+                  {
+                    backgroundColor: accentColor,
+                    width: `${progressPercent}%`,
+                  },
+                ]}
+              />
+            </View>
+            {progressLabel && (
+              <Text style={[styles.progressText, { color: subtextColor }]}>
+                {progressLabel}
+              </Text>
+            )}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    borderRadius: 12,
+    marginBottom: 8,
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 12,
+  },
+  content: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 4,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "600",
+    flex: 1,
+  },
+  checkmark: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: 8,
+  },
+  checkmarkText: {
+    color: "#000",
+    fontSize: 12,
+    fontWeight: "bold",
+  },
+  description: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  progressContainer: {
+    marginTop: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  progressBar: {
+    flex: 1,
+    height: 4,
+    borderRadius: 2,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 2,
+  },
+  progressText: {
+    fontSize: 11,
+    minWidth: 40,
+    textAlign: "right",
+  },
+});

package/src/components/GamificationScreen.tsx

@@ -0,0 +1,236 @@
+/**
+ * GamificationScreen Component
+ * Full gamification screen - all text via props
+ * Generic for 100+ apps - NO hardcoded strings
+ */
+
+import React from "react";
+import {
+  View,
+  Text,
+  ScrollView,
+  StyleSheet,
+  type ViewStyle,
+  type TextStyle,
+} from "react-native";
+import { LevelProgress, type LevelProgressProps } from "./LevelProgress";
+import { StatsCard, type StatsCardProps } from "./StatsCard";
+import { AchievementItem, type AchievementItemProps } from "./AchievementItem";
+import { StreakDisplay, type StreakDisplayProps } from "./StreakDisplay";
+
+export interface GamificationScreenProps {
+  // Section titles (all via props)
+  title: string;
+  statsTitle: string;
+  achievementsTitle: string;
+  streakTitle: string;
+
+  // Level data
+  levelProps: Omit<LevelProgressProps, "primaryColor" | "backgroundColor" | "textColor" | "subtextColor">;
+
+  // Stats data
+  stats: Array<Omit<StatsCardProps, "accentColor" | "backgroundColor" | "textColor" | "subtextColor">>;
+
+  // Achievements data
+  achievements: Array<
+    Omit<AchievementItemProps, "accentColor" | "backgroundColor" | "textColor" | "subtextColor" | "lockedOpacity">
+  >;
+
+  // Streak data (optional)
+  streakProps?: Omit<StreakDisplayProps, "primaryColor" | "backgroundColor" | "textColor" | "subtextColor">;
+
+  // Empty state
+  emptyAchievementsText?: string;
+
+  // Customization
+  containerStyle?: ViewStyle;
+  headerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  sectionTitleStyle?: TextStyle;
+
+  // Colors (applied to all child components)
+  accentColor?: string;
+  backgroundColor?: string;
+  cardBackgroundColor?: string;
+  textColor?: string;
+  subtextColor?: string;
+
+  // Header component (optional - for back button etc)
+  headerComponent?: React.ReactNode;
+}
+
+export const GamificationScreen: React.FC<GamificationScreenProps> = ({
+  title,
+  statsTitle,
+  achievementsTitle,
+  streakTitle,
+  levelProps,
+  stats,
+  achievements,
+  streakProps,
+  emptyAchievementsText,
+  containerStyle,
+  headerStyle,
+  titleStyle,
+  sectionTitleStyle,
+  accentColor = "#FFD700",
+  backgroundColor = "#0A0A0A",
+  cardBackgroundColor = "#1A1A1A",
+  textColor = "#FFFFFF",
+  subtextColor = "#888888",
+  headerComponent,
+}) => {
+  const unlockedAchievements = achievements.filter((a) => a.isUnlocked);
+  const lockedAchievements = achievements.filter((a) => !a.isUnlocked);
+
+  return (
+    <View style={[styles.container, { backgroundColor }, containerStyle]}>
+      {headerComponent}
+
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Header */}
+        <View style={[styles.header, headerStyle]}>
+          <Text style={[styles.title, { color: textColor }, titleStyle]}>
+            {title}
+          </Text>
+        </View>
+
+        {/* Level Progress */}
+        <View style={styles.section}>
+          <LevelProgress
+            {...levelProps}
+            primaryColor={accentColor}
+            backgroundColor={cardBackgroundColor}
+            textColor={textColor}
+            subtextColor={subtextColor}
+          />
+        </View>
+
+        {/* Streak (if provided) */}
+        {streakProps && (
+          <View style={styles.section}>
+            <Text
+              style={[styles.sectionTitle, { color: textColor }, sectionTitleStyle]}
+            >
+              {streakTitle}
+            </Text>
+            <StreakDisplay
+              {...streakProps}
+              primaryColor={accentColor}
+              backgroundColor={cardBackgroundColor}
+              textColor={textColor}
+              subtextColor={subtextColor}
+            />
+          </View>
+        )}
+
+        {/* Stats Grid */}
+        {stats.length > 0 && (
+          <View style={styles.section}>
+            <Text
+              style={[styles.sectionTitle, { color: textColor }, sectionTitleStyle]}
+            >
+              {statsTitle}
+            </Text>
+            <View style={styles.statsGrid}>
+              {stats.map((stat, index) => (
+                <StatsCard
+                  key={index}
+                  {...stat}
+                  accentColor={accentColor}
+                  backgroundColor={cardBackgroundColor}
+                  textColor={textColor}
+                  subtextColor={subtextColor}
+                />
+              ))}
+            </View>
+          </View>
+        )}
+
+        {/* Achievements */}
+        <View style={styles.section}>
+          <Text
+            style={[styles.sectionTitle, { color: textColor }, sectionTitleStyle]}
+          >
+            {achievementsTitle}
+          </Text>
+
+          {achievements.length === 0 && emptyAchievementsText ? (
+            <Text style={[styles.emptyText, { color: subtextColor }]}>
+              {emptyAchievementsText}
+            </Text>
+          ) : (
+            <>
+              {/* Unlocked achievements first */}
+              {unlockedAchievements.map((achievement, index) => (
+                <AchievementItem
+                  key={`unlocked-${index}`}
+                  {...achievement}
+                  accentColor={accentColor}
+                  backgroundColor={cardBackgroundColor}
+                  textColor={textColor}
+                  subtextColor={subtextColor}
+                />
+              ))}
+
+              {/* Locked achievements */}
+              {lockedAchievements.map((achievement, index) => (
+                <AchievementItem
+                  key={`locked-${index}`}
+                  {...achievement}
+                  accentColor={accentColor}
+                  backgroundColor={cardBackgroundColor}
+                  textColor={textColor}
+                  subtextColor={subtextColor}
+                  lockedOpacity={0.6}
+                />
+              ))}
+            </>
+          )}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    padding: 16,
+    paddingBottom: 32,
+  },
+  header: {
+    marginBottom: 20,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "bold",
+  },
+  section: {
+    marginBottom: 24,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    marginBottom: 12,
+  },
+  statsGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+  },
+  emptyText: {
+    fontSize: 14,
+    textAlign: "center",
+    paddingVertical: 20,
+  },
+});

package/src/components/StatsCard.tsx

@@ -0,0 +1,89 @@
+/**
+ * StatsCard Component
+ * Displays a stat with icon - all text via props
+ */
+
+import React from "react";
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+
+export interface StatsCardProps {
+  value: number;
+  label: string;
+  icon: React.ReactNode;
+  suffix?: string;
+  // Customization
+  containerStyle?: ViewStyle;
+  valueStyle?: TextStyle;
+  labelStyle?: TextStyle;
+  // Colors
+  accentColor?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  subtextColor?: string;
+}
+
+export const StatsCard: React.FC<StatsCardProps> = ({
+  value,
+  label,
+  icon,
+  suffix,
+  containerStyle,
+  valueStyle,
+  labelStyle,
+  accentColor = "#FFD700",
+  backgroundColor = "#1A1A1A",
+  textColor = "#FFFFFF",
+  subtextColor = "#888888",
+}) => {
+  return (
+    <View style={[styles.container, { backgroundColor }, containerStyle]}>
+      <View style={[styles.iconContainer, { backgroundColor: `${accentColor}15` }]}>
+        {icon}
+      </View>
+      <View style={styles.valueRow}>
+        <Text style={[styles.value, { color: textColor }, valueStyle]}>
+          {value}
+        </Text>
+        {suffix && (
+          <Text style={[styles.suffix, { color: subtextColor }]}>{suffix}</Text>
+        )}
+      </View>
+      <Text style={[styles.label, { color: subtextColor }, labelStyle]}>
+        {label}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    minWidth: "45%",
+    borderRadius: 12,
+    padding: 12,
+  },
+  iconContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 8,
+  },
+  valueRow: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: 4,
+  },
+  value: {
+    fontSize: 24,
+    fontWeight: "bold",
+  },
+  suffix: {
+    fontSize: 12,
+  },
+  label: {
+    fontSize: 12,
+    marginTop: 2,
+  },
+});

package/src/components/index.ts

@@ -8,3 +8,6 @@ export { PointsBadge, type PointsBadgeProps } from "./PointsBadge";
 export { AchievementCard, type AchievementCardProps } from "./AchievementCard";
 export { AchievementToast, type AchievementToastProps } from "./AchievementToast";
 export { StreakDisplay, type StreakDisplayProps } from "./StreakDisplay";
+export { StatsCard, type StatsCardProps } from "./StatsCard";
+export { AchievementItem, type AchievementItemProps } from "./AchievementItem";
+export { GamificationScreen, type GamificationScreenProps } from "./GamificationScreen";

package/src/index.ts

@@ -46,4 +46,10 @@ export {
   type AchievementToastProps,
   StreakDisplay,
   type StreakDisplayProps,
+  StatsCard,
+  type StatsCardProps,
+  AchievementItem,
+  type AchievementItemProps,
+  GamificationScreen,
+  type GamificationScreenProps,
 } from "./components";