@umituz/react-native-settings 4.20.62 → 4.21.1

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

@@ -0,0 +1,51 @@
+/**
+ * GamificationScreen StatsGrid Component
+ */
+
+import React from "react";
+import { View, Text, type TextStyle } from "react-native";
+import { StatsCard } from "../StatsCard";
+import { styles } from "./styles";
+import type { StatsCardProps } from "../StatsCard";
+
+export interface StatsGridProps {
+  statsTitle: string;
+  stats: Array<Omit<StatsCardProps, "accentColor" | "backgroundColor" | "textColor" | "subtextColor">>;
+  accentColor: string;
+  cardBackgroundColor: string;
+  textColor: string;
+  subtextColor: string;
+  sectionTitleStyle?: TextStyle;
+}
+
+export const StatsGrid: React.FC<StatsGridProps> = ({
+  statsTitle,
+  stats,
+  accentColor,
+  cardBackgroundColor,
+  textColor,
+  subtextColor,
+  sectionTitleStyle,
+}) => {
+  if (stats.length === 0) return null;
+
+  return (
+    <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>
+  );
+};

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

@@ -0,0 +1,111 @@
+/**
+ * GamificationScreen Component
+ * Full gamification screen - all text via props
+ * Generic for 100+ apps - NO hardcoded strings
+ */
+
+import React from "react";
+import { View, ScrollView, Text, StyleSheet } from "react-native";
+import { LevelProgress } from "../LevelProgress";
+import { StreakDisplay } from "../StreakDisplay";
+import { Header } from "./Header";
+import { StatsGrid } from "./StatsGrid";
+import { AchievementsList } from "./AchievementsList";
+import { styles } from "./styles";
+import type { GamificationScreenProps } from "./types";
+
+export type { GamificationScreenProps };
+
+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,
+}) => {
+  return (
+    <View style={[styles.container, { backgroundColor }, containerStyle]}>
+      {headerComponent}
+
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Header */}
+        <Header
+          title={title}
+          headerStyle={headerStyle}
+          titleStyle={titleStyle}
+          textColor={textColor}
+        />
+
+        {/* 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 */}
+        <StatsGrid
+          statsTitle={statsTitle}
+          stats={stats}
+          accentColor={accentColor}
+          cardBackgroundColor={cardBackgroundColor}
+          textColor={textColor}
+          subtextColor={subtextColor}
+          sectionTitleStyle={sectionTitleStyle}
+        />
+
+        {/* Achievements */}
+        <AchievementsList
+          achievementsTitle={achievementsTitle}
+          achievements={achievements}
+          emptyAchievementsText={emptyAchievementsText}
+          accentColor={accentColor}
+          cardBackgroundColor={cardBackgroundColor}
+          textColor={textColor}
+          subtextColor={subtextColor}
+          sectionTitleStyle={sectionTitleStyle}
+        />
+      </ScrollView>
+    </View>
+  );
+};

package/src/domains/gamification/components/GamificationScreen/styles.ts

@@ -0,0 +1,43 @@
+/**
+ * GamificationScreen Styles
+ */
+
+import { StyleSheet } from "react-native";
+
+export 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/domains/gamification/components/GamificationScreen/types.ts

@@ -0,0 +1,77 @@
+/**
+ * GamificationScreen Types
+ * Generic types for 100+ apps - NO app-specific code
+ */
+
+import type { LevelProgressProps } from "../LevelProgress";
+import type { StatsCardProps } from "../StatsCard";
+import type { AchievementItemProps } from "../AchievementItem";
+import type { StreakDisplayProps } from "../StreakDisplay";
+import type { ViewStyle, TextStyle } from "react-native";
+
+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 interface GamificationScreenStyleProps {
+  accentColor: string;
+  backgroundColor: string;
+  cardBackgroundColor: string;
+  textColor: string;
+  subtextColor: string;
+}

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

@@ -1,13 +1,13 @@
 /**
  * Gamification Screen Component
- * Wrapper for @umituz/react-native-gamification screen
+ * Wrapper for gamification screen
  */
 
 import React, { useMemo } from "react";
-import { GamificationScreen as BaseGamificationScreen } from "@umituz/react-native-gamification";
-import { useGamification } from "@umituz/react-native-gamification";
+import { GamificationScreen as BaseGamificationScreen } from "./GamificationScreen";
+import { useGamification } from "../hooks/useGamification";
 import { useLocalization } from "@umituz/react-native-localization";
-import type { GamificationSettingsConfig } from "../types";
+import type { GamificationSettingsConfig } from "../types/settings";
 
 export interface GamificationScreenWrapperProps {
   config: GamificationSettingsConfig;

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

@@ -5,7 +5,7 @@
 
 import React from "react";
 import { SettingsItemCard } from "../../../presentation/components/SettingsItemCard";
-import type { GamificationMenuConfig } from "../types";
+import type { GamificationMenuConfig } from "../types/settings";
 
 export interface GamificationSettingsItemProps {
   config: GamificationMenuConfig;

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