@umituz/react-native-settings 4.20.61 → 4.21.1

package/package.json

@@ -1,16 +1,14 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.20.61",
-  "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",
@@ -26,6 +24,8 @@
     "feedback",
     "faqs",
     "rating",
+    "gamification",
+    "achievements",
     "consolidated"
   ],
   "author": "Ümit UZ <umit@umituz.com>",
@@ -35,12 +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-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"
@@ -52,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/README.md

@@ -0,0 +1,343 @@
+# Gamification Domain
+
+Complete gamification integration for React Native Settings package.
+
+## Overview
+
+The gamification domain provides a seamless integration of achievements, levels, streaks, and points into your settings screen. It wraps `@umituz/react-native-gamification` with settings-specific functionality.
+
+## Features
+
+- ✅ **Achievements System** - Track and display user achievements
+- ✅ **Level Progression** - Visual level progress with points
+- ✅ **Streak Tracking** - Daily streak monitoring
+- ✅ **Statistics Display** - Comprehensive stats cards
+- ✅ **Localized** - Full i18n support via `@umituz/react-native-localization`
+- ✅ **Theme Support** - Automatic dark/light mode integration
+- ✅ **Navigation Ready** - Pre-configured navigation integration
+
+## Architecture
+
+```
+src/domains/gamification/
+├── types/
+│   └── index.ts                    # Type definitions
+├── components/
+│   ├── GamificationScreenWrapper.tsx   # Main screen wrapper
+│   └── GamificationSettingsItem.tsx    # Menu item component
+└── index.ts                        # Public API
+```
+
+## Installation
+
+The gamification domain is included in `@umituz/react-native-settings`. Ensure you have the peer dependency:
+
+```bash
+npm install @umituz/react-native-gamification
+```
+
+## Usage
+
+### 1. Configure Gamification in Settings
+
+```typescript
+// src/domains/settings/config/gamification.config.ts
+import type { GamificationSettingsConfig } from "@umituz/react-native-settings";
+
+export const createGamificationConfig = ({ t }): GamificationSettingsConfig => ({
+  enabled: true,
+  config: {
+    storageKey: "app_gamification",
+    achievements: [
+      { id: "first_task", threshold: 1, type: "count" },
+      { id: "ten_tasks", threshold: 10, type: "count" },
+      { id: "week_streak", threshold: 7, type: "streak" },
+    ],
+    levels: [
+      { level: 1, minPoints: 0, maxPoints: 50 },
+      { level: 2, minPoints: 50, maxPoints: 150 },
+      { level: 3, minPoints: 150, maxPoints: 300 },
+    ],
+    pointsPerAction: 10,
+    streakBonusMultiplier: 1.5,
+  },
+  screenProps: {
+    title: t("gamification.title"),
+    statsTitle: t("gamification.stats.title"),
+    achievementsTitle: t("gamification.achievements.title"),
+    streakTitle: t("gamification.streak.title"),
+  },
+});
+```
+
+### 2. Add to Settings Config
+
+```typescript
+// src/domains/settings/config/settings.config.ts
+import { createGamificationConfig } from "./gamification.config";
+
+export const createSettingsConfig = ({ t, user, isPremium }) => ({
+  // ... other configs
+  gamification: createGamificationConfig({ t }),
+});
+```
+
+### 3. Pass to SettingsStackNavigator
+
+```typescript
+// src/domains/settings/presentation/SettingsTab.tsx
+import { SettingsStackNavigator } from "@umituz/react-native-settings";
+
+export const SettingsTab = () => {
+  const { t } = useLocalization();
+  const config = useMemo(() => createSettingsConfig({ t }), [t]);
+
+  return (
+    <SettingsStackNavigator
+      appInfo={APP_INFO}
+      legalUrls={LEGAL_URLS}
+      gamificationConfig={config.gamification}
+    />
+  );
+};
+```
+
+### 4. Add Menu Item (Optional)
+
+```typescript
+// In your custom settings sections
+import { GamificationSettingsItem } from "@umituz/react-native-settings";
+
+const customSections = [
+  {
+    title: t("settings.sections.engagement"),
+    items: [
+      <GamificationSettingsItem
+        config={{
+          enabled: true,
+          title: t("settings.gamification.menuTitle"),
+          subtitle: t("settings.gamification.menuSubtitle"),
+          icon: "trophy",
+          onPress: () => navigation.navigate("Gamification"),
+        }}
+      />,
+    ],
+  },
+];
+```
+
+## Localization
+
+Add these keys to your localization files:
+
+```json
+{
+  "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"
+    },
+    "achievements": {
+      "title": "Achievements",
+      "empty": "No achievements yet. Keep going!",
+      "first_task": {
+        "title": "First Steps",
+        "description": "Complete your first task"
+      },
+      "ten_tasks": {
+        "title": "Getting Started",
+        "description": "Complete 10 tasks"
+      },
+      "week_streak": {
+        "title": "Week Warrior",
+        "description": "Maintain a 7-day streak"
+      }
+    },
+    "streak": {
+      "title": "Streak",
+      "current": "Current Streak",
+      "best": "Best Streak"
+    }
+  }
+}
+```
+
+## API Reference
+
+### Types
+
+#### `GamificationSettingsConfig`
+
+```typescript
+interface GamificationSettingsConfig {
+  enabled: boolean;
+  config: GamificationConfig;
+  screenProps: Omit<GamificationScreenProps, "levelProps" | "stats" | "achievements">;
+  onNavigate?: () => void;
+}
+```
+
+#### `GamificationMenuConfig`
+
+```typescript
+interface GamificationMenuConfig {
+  enabled: boolean;
+  title: string;
+  subtitle?: string;
+  icon?: string;
+  onPress?: () => void;
+}
+```
+
+### Components
+
+#### `GamificationScreenWrapper`
+
+Main screen component that displays gamification data.
+
+**Props:**
+- `config: GamificationSettingsConfig` - Configuration object
+
+#### `GamificationSettingsItem`
+
+Menu item component for settings list.
+
+**Props:**
+- `config: GamificationMenuConfig` - Menu configuration
+
+## Re-exported Components
+
+All components from `@umituz/react-native-gamification` are re-exported for convenience:
+
+```typescript
+import {
+  LevelProgress,
+  PointsBadge,
+  AchievementCard,
+  AchievementToast,
+  StreakDisplay,
+  StatsCard,
+  AchievementItem,
+  useGamification,
+  useGamificationStore,
+} from "@umituz/react-native-settings";
+```
+
+## Example: Complete Integration
+
+```typescript
+// 1. Create config
+const gamificationConfig: GamificationSettingsConfig = {
+  enabled: true,
+  config: {
+    storageKey: "my_app_gamification",
+    achievements: [
+      { id: "first_login", threshold: 1, type: "milestone" },
+      { id: "power_user", threshold: 100, type: "count" },
+    ],
+    levels: [
+      { level: 1, minPoints: 0, maxPoints: 100 },
+      { level: 2, minPoints: 100, maxPoints: 250 },
+    ],
+    pointsPerAction: 5,
+  },
+  screenProps: {
+    title: "Your Achievements",
+    statsTitle: "Your Stats",
+    achievementsTitle: "Unlocked Achievements",
+    streakTitle: "Daily Streak",
+  },
+};
+
+// 2. Use in navigator
+<SettingsStackNavigator
+  appInfo={APP_INFO}
+  legalUrls={LEGAL_URLS}
+  gamificationConfig={gamificationConfig}
+/>
+
+// 3. Track actions in your app
+import { useGamification } from "@umituz/react-native-settings";
+
+const MyComponent = () => {
+  const { completeTask, addPoints } = useGamification();
+
+  const handleTaskComplete = () => {
+    completeTask(); // Adds points, updates streak, checks achievements
+  };
+
+  return <Button onPress={handleTaskComplete} title="Complete Task" />;
+};
+```
+
+## Best Practices
+
+1. **Config Files ≤ 80 lines** - Keep gamification config in separate file
+2. **Use i18n** - Never hardcode strings, always use translation keys
+3. **Initialize Early** - Initialize gamification in app startup
+4. **Track Meaningfully** - Only track actions that matter to users
+5. **Test Achievements** - Ensure thresholds are achievable and rewarding
+
+## Testing
+
+```typescript
+import { useGamification } from "@umituz/react-native-settings";
+
+describe("Gamification", () => {
+  it("should track task completion", () => {
+    const { completeTask, totalTasksCompleted } = useGamification();
+    completeTask();
+    expect(totalTasksCompleted).toBe(1);
+  });
+});
+```
+
+## Troubleshooting
+
+### Gamification screen not showing
+- Ensure `gamificationConfig.enabled` is `true`
+- Check that config is passed to `SettingsStackNavigator`
+
+### Achievements not unlocking
+- Verify achievement IDs match between config and localization
+- Check threshold values are correct
+- Ensure `completeTask()` or `addPoints()` is being called
+
+### Localization missing
+- Add all required translation keys
+- Check language files are properly loaded
+
+## Migration Guide
+
+If migrating from standalone gamification package:
+
+```typescript
+// Before
+import { GamificationScreen } from "@umituz/react-native-gamification";
+
+// After
+import { GamificationScreenWrapper } from "@umituz/react-native-settings";
+```
+
+## Related Documentation
+
+- [@umituz/react-native-gamification](../../../react-native-gamification/README.md)
+- [Settings Architecture](../../ARCHITECTURE.md)
+- [Settings Screen Guide](../../SETTINGS_SCREEN_GUIDE.md)
+
+## License
+
+MIT © Ümit UZ

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",
+  },
+});