@umituz/react-native-settings 4.20.61 → 4.21.1

package/src/domains/gamification/components/GamificationScreenWrapper.tsx

@@ -0,0 +1,91 @@
+/**
+ * Gamification Screen Component
+ * Wrapper for gamification screen
+ */
+
+import React, { useMemo } from "react";
+import { GamificationScreen as BaseGamificationScreen } from "./GamificationScreen";
+import { useGamification } from "../hooks/useGamification";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { GamificationSettingsConfig } from "../types/settings";
+
+export interface GamificationScreenWrapperProps {
+  config: GamificationSettingsConfig;
+}
+
+/**
+ * Gamification Screen for Settings
+ * Displays achievements, levels, streaks, and stats
+ */
+export const GamificationScreenWrapper: React.FC<GamificationScreenWrapperProps> = ({
+  config,
+}) => {
+  const { t } = useLocalization();
+  const gamification = useGamification(config.config);
+
+  const screenProps = useMemo(() => {
+    // Map achievements to screen format
+    const achievements = gamification.achievements.map((achievement) => ({
+      id: achievement.id,
+      title: t(`gamification.achievements.${achievement.id}.title`),
+      description: t(`gamification.achievements.${achievement.id}.description`),
+      icon: "trophy",
+      isUnlocked: achievement.isUnlocked,
+      progress: achievement.progress,
+      threshold: achievement.threshold,
+    }));
+
+    // Map stats
+    const stats = [
+      {
+        icon: "star",
+        value: gamification.points,
+        label: t("gamification.stats.totalPoints"),
+      },
+      {
+        icon: "check-circle",
+        value: gamification.totalTasksCompleted,
+        label: t("gamification.stats.tasksCompleted"),
+      },
+      {
+        icon: "award",
+        value: gamification.achievements.filter((a) => a.isUnlocked).length,
+        label: t("gamification.stats.achievementsUnlocked"),
+      },
+    ];
+
+    // Level props
+    const levelProps = {
+      level: gamification.level.currentLevel,
+      points: gamification.level.currentPoints,
+      levelTitle: t("gamification.level.title", {
+        level: gamification.level.currentLevel,
+      }),
+      pointsToNext: gamification.level.pointsToNext,
+      progress: gamification.level.progress,
+      showPoints: true,
+    };
+
+    // Streak props
+    const streakProps = gamification.streak.current > 0
+      ? {
+          current: gamification.streak.current,
+          longest: gamification.streak.longest,
+          currentLabel: t("gamification.streak.current"),
+          bestLabel: t("gamification.streak.best"),
+          daysLabel: t("gamification.streak.days"),
+        }
+      : undefined;
+
+    return {
+      ...config.screenProps,
+      levelProps,
+      stats,
+      achievements,
+      streakProps,
+      emptyAchievementsText: t("gamification.achievements.empty"),
+    };
+  }, [gamification, config.screenProps, t]);
+
+  return <BaseGamificationScreen {...screenProps} />;
+};

package/src/domains/gamification/components/GamificationSettingsItem.tsx

@@ -0,0 +1,33 @@
+/**
+ * Gamification Settings Item Component
+ * Menu item to navigate to gamification screen
+ */
+
+import React from "react";
+import { SettingsItemCard } from "../../../presentation/components/SettingsItemCard";
+import type { GamificationMenuConfig } from "../types/settings";
+
+export interface GamificationSettingsItemProps {
+  config: GamificationMenuConfig;
+}
+
+/**
+ * Gamification menu item for settings screen
+ */
+export const GamificationSettingsItem: React.FC<GamificationSettingsItemProps> = ({
+  config,
+}) => {
+  if (!config.enabled) {
+    return null;
+  }
+
+  return (
+    <SettingsItemCard
+      title={config.title}
+      description={config.subtitle}
+      icon={config.icon || "trophy"}
+      onPress={config.onPress}
+      showChevron
+    />
+  );
+};

package/src/domains/gamification/components/LevelProgress.tsx

@@ -0,0 +1,129 @@
+/**
+ * LevelProgress Component
+ * Displays level and progress - all text via props
+ */
+
+import React from "react";
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+
+export interface LevelProgressProps {
+  level: number;
+  points: number;
+  levelTitle: string;
+  pointsToNext: number;
+  progress: number;
+  showPoints?: boolean;
+  // Customization
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  subtitleStyle?: TextStyle;
+  progressBarStyle?: ViewStyle;
+  progressFillStyle?: ViewStyle;
+  badgeStyle?: ViewStyle;
+  badgeTextStyle?: TextStyle;
+  // Colors (design system integration)
+  primaryColor?: string;
+  secondaryColor?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  subtextColor?: string;
+}
+
+export const LevelProgress: React.FC<LevelProgressProps> = ({
+  level,
+  points,
+  levelTitle,
+  pointsToNext,
+  progress,
+  showPoints = true,
+  containerStyle,
+  titleStyle,
+  subtitleStyle,
+  progressBarStyle,
+  progressFillStyle,
+  badgeStyle,
+  badgeTextStyle,
+  primaryColor = "#FFD700",
+  secondaryColor = "#2A2A2A",
+  backgroundColor = "#1A1A1A",
+  textColor = "#FFFFFF",
+  subtextColor = "#888888",
+}) => {
+  return (
+    <View style={[styles.container, { backgroundColor }, containerStyle]}>
+      <View style={styles.header}>
+        <View style={styles.titleSection}>
+          <Text style={[styles.levelTitle, { color: textColor }, titleStyle]}>
+            {levelTitle}
+          </Text>
+          {showPoints && (
+            <Text style={[styles.subtitle, { color: subtextColor }, subtitleStyle]}>
+              {points} / {points + pointsToNext}
+            </Text>
+          )}
+        </View>
+
+        <View style={[styles.badge, { backgroundColor: `${primaryColor}20`, borderColor: `${primaryColor}40` }, badgeStyle]}>
+          <Text style={[styles.badgeText, { color: primaryColor }, badgeTextStyle]}>
+            {level}
+          </Text>
+        </View>
+      </View>
+
+      <View style={[styles.progressBar, { backgroundColor: secondaryColor }, progressBarStyle]}>
+        <View
+          style={[
+            styles.progressFill,
+            { width: `${Math.min(100, progress)}%`, backgroundColor: primaryColor },
+            progressFillStyle,
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 16,
+    padding: 16,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 12,
+  },
+  titleSection: {
+    flex: 1,
+  },
+  levelTitle: {
+    fontSize: 18,
+    fontWeight: "700",
+  },
+  subtitle: {
+    fontSize: 14,
+    marginTop: 2,
+  },
+  badge: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 2,
+  },
+  badgeText: {
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+  progressBar: {
+    height: 8,
+    borderRadius: 4,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 4,
+  },
+});

package/src/domains/gamification/components/PointsBadge.tsx

@@ -0,0 +1,60 @@
+/**
+ * PointsBadge Component
+ * Displays points with optional icon - all text via props
+ */
+
+import React from "react";
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+
+export interface PointsBadgeProps {
+  points: number;
+  icon?: React.ReactNode;
+  // Customization
+  containerStyle?: ViewStyle;
+  textStyle?: TextStyle;
+  // Colors
+  backgroundColor?: string;
+  textColor?: string;
+  borderColor?: string;
+}
+
+export const PointsBadge: React.FC<PointsBadgeProps> = ({
+  points,
+  icon,
+  containerStyle,
+  textStyle,
+  backgroundColor = "#FFD70020",
+  textColor = "#FFD700",
+  borderColor = "#FFD70040",
+}) => {
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor, borderColor },
+        containerStyle,
+      ]}
+    >
+      {icon}
+      <Text style={[styles.text, { color: textColor }, textStyle]}>
+        {points}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 20,
+    borderWidth: 1,
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+});

package/src/domains/gamification/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/domains/gamification/components/StreakDisplay.tsx

@@ -0,0 +1,119 @@
+/**
+ * StreakDisplay Component
+ * Displays streak information - all text via props
+ */
+
+import React from "react";
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+
+export interface StreakDisplayProps {
+  current: number;
+  longest: number;
+  currentLabel: string; // e.g., "Current Streak"
+  bestLabel: string; // e.g., "Best"
+  daysLabel: string; // e.g., "days"
+  icon?: React.ReactNode;
+  // Customization
+  containerStyle?: ViewStyle;
+  numberStyle?: TextStyle;
+  labelStyle?: TextStyle;
+  // Colors
+  primaryColor?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  subtextColor?: string;
+}
+
+export const StreakDisplay: React.FC<StreakDisplayProps> = ({
+  current,
+  longest,
+  currentLabel,
+  bestLabel,
+  daysLabel,
+  icon,
+  containerStyle,
+  numberStyle,
+  labelStyle,
+  primaryColor = "#FF6B35",
+  backgroundColor = "#1A1A1A",
+  textColor = "#FFFFFF",
+  subtextColor = "#888888",
+}) => {
+  return (
+    <View style={[styles.container, { backgroundColor }, containerStyle]}>
+      <View style={styles.mainStreak}>
+        {icon && <View style={styles.iconContainer}>{icon}</View>}
+        <View style={styles.streakInfo}>
+          <Text style={[styles.number, { color: primaryColor }, numberStyle]}>
+            {current}
+          </Text>
+          <Text style={[styles.label, { color: subtextColor }, labelStyle]}>
+            {daysLabel}
+          </Text>
+        </View>
+        <Text style={[styles.currentLabel, { color: textColor }]}>
+          {currentLabel}
+        </Text>
+      </View>
+
+      <View style={[styles.bestStreak, { backgroundColor: `${primaryColor}20` }]}>
+        <Text style={[styles.bestLabel, { color: subtextColor }]}>
+          {bestLabel}
+        </Text>
+        <Text style={[styles.bestNumber, { color: primaryColor }]}>
+          {longest}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 16,
+    padding: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  mainStreak: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  streakInfo: {
+    alignItems: "center",
+  },
+  number: {
+    fontSize: 32,
+    fontWeight: "bold",
+  },
+  label: {
+    fontSize: 12,
+    textTransform: "uppercase",
+  },
+  currentLabel: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  bestStreak: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 12,
+    alignItems: "center",
+  },
+  bestLabel: {
+    fontSize: 11,
+    textTransform: "uppercase",
+  },
+  bestNumber: {
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+});

package/src/domains/gamification/components/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Gamification Components
+ * All text via props - NO hardcoded strings
+ */
+
+export { LevelProgress, type LevelProgressProps } from "./LevelProgress";
+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/index";

package/src/domains/gamification/examples/gamification.config.example.ts

@@ -0,0 +1,70 @@
+/**
+ * Gamification Configuration Example
+ * 
+ * Copy this file to your app's settings config directory:
+ * src/domains/settings/config/gamification.config.ts
+ */
+
+import type { GamificationSettingsConfig } from "../types/settings";
+
+/**
+ * Creates gamification configuration for settings
+ * 
+ * @param t - Translation function from useLocalization
+ * @returns Gamification settings configuration
+ */
+export const createGamificationConfig = ({ t }): GamificationSettingsConfig => ({
+  enabled: true,
+  
+  // Gamification system configuration
+  config: {
+    storageKey: "app_gamification_data",
+    
+    // Define achievements
+    achievements: [
+      // Count-based achievements
+      { id: "first_task", threshold: 1, type: "count" },
+      { id: "five_tasks", threshold: 5, type: "count" },
+      { id: "ten_tasks", threshold: 10, type: "count" },
+      { id: "fifty_tasks", threshold: 50, type: "count" },
+      { id: "hundred_tasks", threshold: 100, type: "count" },
+      
+      // Streak-based achievements
+      { id: "three_day_streak", threshold: 3, type: "streak" },
+      { id: "week_streak", threshold: 7, type: "streak" },
+      { id: "month_streak", threshold: 30, type: "streak" },
+      
+      // Milestone achievements
+      { id: "first_login", threshold: 1, type: "milestone" },
+      { id: "power_user", threshold: 1, type: "milestone" },
+    ],
+    
+    // Define level progression
+    levels: [
+      { level: 1, minPoints: 0, maxPoints: 50 },
+      { level: 2, minPoints: 50, maxPoints: 150 },
+      { level: 3, minPoints: 150, maxPoints: 300 },
+      { level: 4, minPoints: 300, maxPoints: 500 },
+      { level: 5, minPoints: 500, maxPoints: 800 },
+      { level: 6, minPoints: 800, maxPoints: 1200 },
+      { level: 7, minPoints: 1200, maxPoints: 1700 },
+      { level: 8, minPoints: 1700, maxPoints: 2300 },
+      { level: 9, minPoints: 2300, maxPoints: 3000 },
+      { level: 10, minPoints: 3000, maxPoints: 999999 },
+    ],
+    
+    // Points awarded per action
+    pointsPerAction: 10,
+    
+    // Streak bonus multiplier (1.5 = 50% bonus)
+    streakBonusMultiplier: 1.5,
+  },
+  
+  // Screen display configuration
+  screenProps: {
+    title: t("gamification.title"),
+    statsTitle: t("gamification.stats.title"),
+    achievementsTitle: t("gamification.achievements.title"),
+    streakTitle: t("gamification.streak.title"),
+  },
+});

package/src/domains/gamification/examples/localization.example.json

@@ -0,0 +1,71 @@
+{
+  "settings": {
+    "gamification": {
+      "title": "Achievements",
+      "menuTitle": "Achievements & Progress",
+      "menuSubtitle": "View your achievements and stats"
+    }
+  },
+  "gamification": {
+    "title": "Your Progress",
+    "level": {
+      "title": "Level {{level}}"
+    },
+    "stats": {
+      "title": "Statistics",
+      "totalPoints": "Total Points",
+      "tasksCompleted": "Tasks Completed",
+      "achievementsUnlocked": "Achievements Unlocked"
+    },
+    "achievements": {
+      "title": "Achievements",
+      "empty": "No achievements yet. Keep going!",
+      "first_task": {
+        "title": "First Steps",
+        "description": "Complete your first task"
+      },
+      "five_tasks": {
+        "title": "Getting Started",
+        "description": "Complete 5 tasks"
+      },
+      "ten_tasks": {
+        "title": "On a Roll",
+        "description": "Complete 10 tasks"
+      },
+      "fifty_tasks": {
+        "title": "Dedicated",
+        "description": "Complete 50 tasks"
+      },
+      "hundred_tasks": {
+        "title": "Century Club",
+        "description": "Complete 100 tasks"
+      },
+      "three_day_streak": {
+        "title": "Consistent",
+        "description": "Maintain a 3-day streak"
+      },
+      "week_streak": {
+        "title": "Week Warrior",
+        "description": "Maintain a 7-day streak"
+      },
+      "month_streak": {
+        "title": "Monthly Master",
+        "description": "Maintain a 30-day streak"
+      },
+      "first_login": {
+        "title": "Welcome!",
+        "description": "Join the community"
+      },
+      "power_user": {
+        "title": "Power User",
+        "description": "Unlock all features"
+      }
+    },
+    "streak": {
+      "title": "Daily Streak",
+      "current": "Current Streak",
+      "best": "Best Streak",
+      "days": "days"
+    }
+  }
+}