@umituz/react-native-settings 4.20.62 → 4.21.1

package/package.json

@@ -1,16 +1,14 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.20.62",
-  "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, and rating",
+  "version": "4.21.1",
+  "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
-    "version:patch": "npm version patch -m 'chore: release v%s'",
-    "version:minor": "npm version minor -m 'chore: release v%s'",
-    "version:major": "npm version major -m 'chore: release v%s'"
+    "vp": "npm version patch && npm publish && git push"
   },
   "keywords": [
     "react-native",
@@ -37,13 +35,10 @@
     "url": "https://github.com/umituz/react-native-settings"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^2.2.0",
     "@umituz/react-native-auth": "latest",
     "@umituz/react-native-design-system": "latest",
-    "@umituz/react-native-gamification": "latest",
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-notifications": "latest",
-    "@umituz/react-native-onboarding": "latest",
     "@umituz/react-native-storage": "latest",
     "@umituz/react-native-tanstack": "latest",
     "firebase": "^12.7.0"
@@ -55,79 +50,29 @@
     "@tanstack/react-query": ">=5.0.0",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
-    "react-native-safe-area-context": ">=4.0.0",
-    "zustand": ">=5.0.0"
+    "react-native-safe-area-context": ">=4.0.0"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.28.5",
     "@expo/vector-icons": "^15.0.0",
-    "@gorhom/bottom-sheet": "^5.2.8",
-    "@react-native-community/datetimepicker": "^8.5.1",
-    "@react-navigation/bottom-tabs": "^7.9.0",
     "@react-navigation/native": "^7.1.26",
     "@react-navigation/stack": "^7.6.13",
-    "@sentry/react-native": "^7.8.0",
-    "@sentry/types": "^10.32.1",
     "@tanstack/react-query": "^5.0.0",
-    "@types/jest": "^29.5.14",
     "@types/react": "~19.1.10",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "@umituz/react-native-auth": "latest",
-    "@umituz/react-native-design-system": "latest",
-    "@umituz/react-native-filesystem": "latest",
-    "@umituz/react-native-firebase": "latest",
-    "@umituz/react-native-haptics": "latest",
-    "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-notifications": "latest",
-    "@umituz/react-native-onboarding": "latest",
-    "@umituz/react-native-sentry": "^1.4.3",
-    "@umituz/react-native-storage": "latest",
-    "@umituz/react-native-tanstack": "latest",
-    "@umituz/react-native-uuid": "latest",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-native": "^5.0.0",
-    "expo-apple-authentication": "^8.0.8",
-    "expo-application": "^7.0.8",
-    "expo-clipboard": "^8.0.8",
-    "expo-crypto": "^15.0.8",
-    "expo-device": "^8.0.10",
-    "expo-file-system": "^19.0.21",
-    "expo-haptics": "^15.0.8",
-    "expo-image": "^3.0.11",
-    "expo-localization": "^17.0.8",
-    "expo-notifications": "^0.32.15",
-    "expo-sharing": "^14.0.8",
-    "expo-video": "^3.0.15",
-    "i18next": "^25.7.3",
     "react": "19.1.0",
-    "react-i18next": "^16.5.0",
     "react-native": "0.81.5",
-    "react-native-gesture-handler": "^2.30.0",
-    "react-native-reanimated": "^4.2.1",
     "react-native-safe-area-context": "^5.6.2",
-    "rn-emoji-keyboard": "^1.7.0",
-    "typescript": "^5.3.0",
-    "zustand": "^5.0.9"
+    "typescript": "^5.3.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "files": [
     "src",
-    "README.md",
-    "LICENSE",
-    "CONTRIBUTING.md",
-    "CHANGELOG.md",
-    "CODE_OF_CONDUCT.md",
-    "SECURITY.md",
-    "ARCHITECTURE.md",
-    "TESTING.md",
-    "AI_AGENT_GUIDELINES.md",
-    "SETTINGS_SCREEN_GUIDE.md",
-    "DOCUMENTATION_TEMPLATE.md",
-    "DOCUMENTATION_MIGRATION.md",
-    ".github"
+    "README.md"
   ]
 }

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

@@ -0,0 +1,142 @@
+/**
+ * AchievementCard Component
+ * Displays achievement - all text via props
+ */
+
+import React from "react";
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+
+export interface AchievementCardProps {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  isUnlocked: boolean;
+  progress: number;
+  // Customization
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  descriptionStyle?: TextStyle;
+  progressBarStyle?: ViewStyle;
+  // Colors
+  unlockedColor?: string;
+  lockedColor?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  subtextColor?: string;
+}
+
+export const AchievementCard: React.FC<AchievementCardProps> = ({
+  title,
+  description,
+  icon,
+  isUnlocked,
+  progress,
+  containerStyle,
+  titleStyle,
+  descriptionStyle,
+  progressBarStyle,
+  unlockedColor = "#4CAF50",
+  lockedColor = "#666666",
+  backgroundColor = "#1A1A1A",
+  textColor = "#FFFFFF",
+  subtextColor = "#888888",
+}) => {
+  const accentColor = isUnlocked ? unlockedColor : lockedColor;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor, borderColor: `${accentColor}40` },
+        containerStyle,
+      ]}
+    >
+      <View style={[styles.iconContainer, { backgroundColor: `${accentColor}20` }]}>
+        {icon}
+      </View>
+
+      <View style={styles.content}>
+        <Text
+          style={[
+            styles.title,
+            { color: isUnlocked ? textColor : subtextColor },
+            titleStyle,
+          ]}
+        >
+          {title}
+        </Text>
+        <Text style={[styles.description, { color: subtextColor }, descriptionStyle]}>
+          {description}
+        </Text>
+
+        {!isUnlocked && (
+          <View style={[styles.progressBar, { backgroundColor: `${lockedColor}40` }, progressBarStyle]}>
+            <View
+              style={[
+                styles.progressFill,
+                { width: `${progress}%`, backgroundColor: accentColor },
+              ]}
+            />
+          </View>
+        )}
+      </View>
+
+      {isUnlocked && (
+        <View style={[styles.checkmark, { backgroundColor: unlockedColor }]}>
+          <Text style={styles.checkmarkText}>✓</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    borderRadius: 12,
+    borderWidth: 1,
+    gap: 12,
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  content: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  description: {
+    fontSize: 13,
+    marginTop: 2,
+  },
+  progressBar: {
+    height: 4,
+    borderRadius: 2,
+    marginTop: 8,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 2,
+  },
+  checkmark: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  checkmarkText: {
+    color: "#FFFFFF",
+    fontSize: 14,
+    fontWeight: "bold",
+  },
+});

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

@@ -0,0 +1,122 @@
+/**
+ * AchievementToast Component
+ * Shows achievement unlock notification - all text via props
+ */
+
+import React, { useEffect, useRef } from "react";
+import { View, Text, StyleSheet, Animated, type ViewStyle, type TextStyle } from "react-native";
+
+export interface AchievementToastProps {
+  visible: boolean;
+  title: string;
+  label: string; // e.g., "Achievement Unlocked!" - from app translations
+  icon: React.ReactNode;
+  onDismiss: () => void;
+  duration?: number;
+  // Customization
+  containerStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  titleStyle?: TextStyle;
+  // Colors
+  backgroundColor?: string;
+  textColor?: string;
+  labelColor?: string;
+}
+
+export const AchievementToast: React.FC<AchievementToastProps> = ({
+  visible,
+  title,
+  label,
+  icon,
+  onDismiss,
+  duration = 3000,
+  containerStyle,
+  labelStyle,
+  titleStyle,
+  backgroundColor = "#FFD700",
+  textColor = "#000000",
+  labelColor = "#00000080",
+}) => {
+  const translateY = useRef(new Animated.Value(-100)).current;
+
+  useEffect(() => {
+    if (visible) {
+      Animated.sequence([
+        Animated.timing(translateY, {
+          toValue: 0,
+          duration: 400,
+          useNativeDriver: true,
+        }),
+        Animated.delay(duration),
+        Animated.timing(translateY, {
+          toValue: -100,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        onDismiss();
+      });
+    }
+  }, [visible, duration, onDismiss, translateY]);
+
+  if (!visible) return null;
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        { transform: [{ translateY }] },
+        containerStyle,
+      ]}
+    >
+      <View style={[styles.toast, { backgroundColor }]}>
+        <View style={styles.iconContainer}>{icon}</View>
+        <View style={styles.content}>
+          <Text style={[styles.label, { color: labelColor }, labelStyle]}>
+            {label}
+          </Text>
+          <Text style={[styles.title, { color: textColor }, titleStyle]}>
+            {title}
+          </Text>
+        </View>
+      </View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 60,
+    left: 16,
+    right: 16,
+    zIndex: 1000,
+  },
+  toast: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 16,
+    borderRadius: 16,
+    gap: 12,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  content: {
+    flex: 1,
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: "bold",
+    textTransform: "uppercase",
+    letterSpacing: 1,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginTop: 2,
+  },
+});

package/src/domains/gamification/components/GamificationScreen/AchievementsList.tsx

@@ -0,0 +1,84 @@
+/**
+ * GamificationScreen AchievementsList Component
+ */
+
+import React from "react";
+import { View, Text, type TextStyle } from "react-native";
+import { AchievementItem } from "../AchievementItem";
+import { styles } from "./styles";
+import type { AchievementItemProps } from "../AchievementItem";
+
+export interface AchievementsListProps {
+  achievementsTitle: string;
+  achievements: Array<
+    Omit<
+      AchievementItemProps,
+      | "accentColor"
+      | "backgroundColor"
+      | "textColor"
+      | "subtextColor"
+      | "lockedOpacity"
+    >
+  >;
+  emptyAchievementsText?: string;
+  accentColor: string;
+  cardBackgroundColor: string;
+  textColor: string;
+  subtextColor: string;
+  sectionTitleStyle?: TextStyle;
+}
+
+export const AchievementsList: React.FC<AchievementsListProps> = ({
+  achievementsTitle,
+  achievements,
+  emptyAchievementsText,
+  accentColor,
+  cardBackgroundColor,
+  textColor,
+  subtextColor,
+  sectionTitleStyle,
+}) => {
+  const unlockedAchievements = achievements.filter((a) => a.isUnlocked);
+  const lockedAchievements = achievements.filter((a) => !a.isUnlocked);
+
+  return (
+    <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>
+  );
+};

package/src/domains/gamification/components/GamificationScreen/Header.tsx

@@ -0,0 +1,29 @@
+/**
+ * GamificationScreen Header Component
+ */
+
+import React from "react";
+import { View, Text, type ViewStyle, type TextStyle } from "react-native";
+import { styles } from "./styles";
+
+export interface HeaderProps {
+  title: string;
+  headerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  textColor: string;
+}
+
+export const Header: React.FC<HeaderProps> = ({
+  title,
+  headerStyle,
+  titleStyle,
+  textColor,
+}) => {
+  return (
+    <View style={[styles.header, headerStyle]}>
+      <Text style={[styles.title, { color: textColor }, titleStyle]}>
+        {title}
+      </Text>
+    </View>
+  );
+};