@umituz/react-native-settings 4.23.69 → 4.23.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.69",
+  "version": "4.23.70",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

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

@@ -1,7 +1,7 @@
 import React from "react";
 /**
  * GamificationScreen Component
- * Full gamification screen - all text via props
+ * Full gamification screen with integrated hook
  * Generic for 100+ apps - NO hardcoded strings
  */
 
@@ -13,11 +13,90 @@ import { Header } from "./Header";
 import { StatsGrid } from "./StatsGrid";
 import { AchievementsList } from "./AchievementsList";
 import { styles } from "./styles";
-import type { GamificationScreenProps } from "./types";
+import type { GamificationScreenProps, GamificationConfigProps } from "./types";
+import type { Achievement } from "../../types";
 
 export type { GamificationScreenProps };
 
-export const GamificationScreen: React.FC<GamificationScreenProps> = ({
+/**
+ * GamificationScreen that accepts either detailed props OR a config object
+ * When config is provided, a hook consumer component is used
+ */
+export const GamificationScreen: React.FC<GamificationScreenProps | GamificationConfigProps> = (props) => {
+  // If config is provided, use the hook-based component
+  if ('config' in props && props.config) {
+    return <GamificationScreenWithConfig config={props.config} />;
+  }
+
+  // Otherwise, render directly with provided props
+  return <GamificationScreenInner {...(props as GamificationScreenProps)} />;
+};
+
+/**
+ * Component that uses the hook - separated to satisfy React Hooks rules
+ */
+const GamificationScreenWithConfig: React.FC<GamificationConfigProps> = ({ config }) => {
+  // Import hook here to avoid conditional hook usage
+  const { useGamification } = require("../../hooks/useGamification");
+
+  const {
+    points,
+    level,
+    streak,
+    achievements,
+  } = useGamification(config);
+
+  // Transform store achievements to UI props
+  const achievementItems = achievements.map((a: Achievement) => ({
+    ...a,
+    title: a.title,
+    description: a.description,
+    icon: a.icon,
+    isUnlocked: a.isUnlocked,
+    progress: a.progress,
+    threshold: a.threshold,
+    id: a.id,
+    type: a.type
+  }));
+
+  const screenProps: GamificationScreenProps = {
+    title: config.translations.title,
+    statsTitle: config.translations.statsTitle,
+    achievementsTitle: config.translations.achievementsTitle,
+    streakTitle: config.translations.streakTitle,
+    levelProps: {
+      level: level.currentLevel,
+      points: level.currentPoints,
+      pointsToNext: level.pointsToNext,
+      progress: level.progress,
+      levelTitle: config.translations.levelTitle,
+      showPoints: true,
+    },
+    streakProps: {
+      current: streak.current,
+      longest: streak.longest,
+      currentLabel: config.translations.currentStreak,
+      bestLabel: config.translations.bestStreak,
+      daysLabel: config.translations.days,
+    },
+    stats: [
+      {
+        label: config.translations.statsTitle,
+        value: points,
+        icon: "star",
+      },
+    ],
+    achievements: achievementItems,
+    emptyAchievementsText: config.translations.emptyAchievements,
+  };
+
+  return <GamificationScreenInner {...screenProps} />;
+};
+
+/**
+ * Internal component that renders the screen with all props
+ */
+const GamificationScreenInner: React.FC<GamificationScreenProps> = ({
   title,
   statsTitle,
   achievementsTitle,

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

@@ -9,6 +9,11 @@ import type { StatsCardProps } from "../StatsCard";
 import type { AchievementItemProps } from "../AchievementItem";
 import type { StreakDisplayProps } from "../StreakDisplay";
 import type { ViewStyle, TextStyle } from "react-native";
+import type { GamificationConfig } from "../../types";
+
+export interface GamificationConfigProps extends Partial<Omit<GamificationScreenProps, 'config'>> {
+  config: GamificationConfig;
+}
 
 export interface GamificationScreenProps {
   // Section titles (all via props)

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

@@ -11,4 +11,3 @@ 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";
-export { GamificationScreenWrapper } from "./GamificationScreenWrapper";

package/src/domains/gamification/index.ts

@@ -54,5 +54,4 @@ export {
   type AchievementItemProps,
   GamificationScreen,
   type GamificationScreenProps,
-  GamificationScreenWrapper,
 } from "./components";

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -13,18 +13,16 @@ import { AccountScreen } from "@umituz/react-native-auth";
 import { SettingsScreen } from "../screens/SettingsScreen";
 import { AppearanceScreen } from "../screens/AppearanceScreen";
 import { FAQScreen } from "../../domains/faqs";
+import { AboutScreen } from "../../domains/about";
+import { LegalScreen } from "../../domains/legal";
+import { GamificationScreen } from "../../domains/gamification";
 import { useNavigationHandlers } from "./hooks";
-import {
-  LegalScreenWrapper,
-  AboutScreenWrapper,
-} from "./components/wrappers";
 import {
   createNotificationTranslations,
   createQuietHoursTranslations,
   createLegalScreenProps,
 } from "./utils";
 import type { SettingsStackParamList, SettingsStackNavigatorProps, AdditionalScreen } from "./types";
-import { GamificationScreenWrapper } from "../../domains/gamification";
 
 export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
   appInfo,
@@ -100,12 +98,12 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
       {
         name: "About",
         options: { headerTitle: t("settings.about.title") },
-        children: () => <AboutScreenWrapper config={aboutConfig} />,
+        children: () => <AboutScreen config={aboutConfig} />,
       },
       {
         name: "Legal",
         options: { headerTitle: t("settings.legal.title") },
-        children: () => <LegalScreenWrapper {...legalScreenProps} />,
+        children: () => <LegalScreen {...legalScreenProps} />,
       },
       {
         name: "Notifications",
@@ -163,7 +161,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
       ? {
           name: "Gamification",
           options: { headerTitle: t("settings.gamification.title") },
-          children: () => <GamificationScreenWrapper config={gamificationConfig} />,
+          children: () => <GamificationScreen config={gamificationConfig} />,
         }
       : null;
 

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

@@ -1,65 +0,0 @@
-import React from 'react';
-import { useGamification } from '../hooks/useGamification';
-import { GamificationScreen } from './GamificationScreen';
-import type { GamificationConfig } from '../types';
-import type { AchievementItemProps } from '../components';
-
-interface GamificationScreenWrapperProps {
-  config: GamificationConfig;
-}
-
-export const GamificationScreenWrapper: React.FC<GamificationScreenWrapperProps> = ({ config }) => {
-  const {
-    points,
-    totalTasksCompleted: _totalTasksCompleted,
-    level,
-    streak,
-    achievements,
-  } = useGamification(config);
-
-  // Transform store achievements to UI props
-  const achievementItems: AchievementItemProps[] = achievements.map(a => ({
-    ...a,
-    title: a.title,
-    description: a.description,
-    icon: a.icon,
-    isUnlocked: a.isUnlocked,
-    progress: a.progress,
-    threshold: a.threshold,
-    id: a.id,
-    type: a.type
-  }));
-
-  return (
-    <GamificationScreen
-      title={config.translations.title}
-      statsTitle={config.translations.statsTitle}
-      achievementsTitle={config.translations.achievementsTitle}
-      streakTitle={config.translations.streakTitle}
-      levelProps={{
-        level: level.currentLevel,
-        points: level.currentPoints,
-        pointsToNext: level.pointsToNext,
-        progress: level.progress,
-        levelTitle: config.translations.levelTitle,
-        showPoints: true,
-      }}
-      streakProps={{
-        current: streak.current,
-        longest: streak.longest,
-        currentLabel: config.translations.currentStreak,
-        bestLabel: config.translations.bestStreak,
-        daysLabel: config.translations.days,
-      }}
-      stats={[
-        {
-          label: config.translations.statsTitle,
-          value: points, // Pass number directly
-          icon: "star",
-        },
-      ]}
-      achievements={achievementItems}
-      emptyAchievementsText={config.translations.emptyAchievements}
-    />
-  );
-};

package/src/presentation/navigation/components/wrappers/AboutScreenWrapper.tsx

@@ -1,14 +0,0 @@
-/**
- * About Screen Wrapper Component
- */
-import React from "react";
-import { AboutScreen } from "../../../../domains/about";
-import type { AboutConfig } from "../../../../domains/about/domain/entities/AppInfo";
-
-export interface AboutScreenWrapperProps {
-  config: AboutConfig;
-}
-
-export const AboutScreenWrapper: React.FC<AboutScreenWrapperProps> = ({
-  config,
-}) => <AboutScreen config={config} />;

package/src/presentation/navigation/components/wrappers/LegalScreenWrapper.tsx

@@ -1,50 +0,0 @@
-/**
- * Legal Screen Wrapper Component
- */
-import React from "react";
-import { LegalScreen } from "../../../../domains/legal";
-
-export interface LegalScreenWrapperProps {
-  title: string;
-  description: string;
-  documentsHeader: string;
-  privacyTitle: string;
-  privacyDescription: string;
-  termsTitle: string;
-  termsDescription: string;
-  eulaTitle: string;
-  eulaDescription: string;
-  onPrivacyPress: () => void;
-  onTermsPress: () => void;
-  onEulaPress: () => void;
-}
-
-export const LegalScreenWrapper: React.FC<LegalScreenWrapperProps> = ({
-  title,
-  description,
-  documentsHeader,
-  privacyTitle,
-  privacyDescription,
-  termsTitle,
-  termsDescription,
-  eulaTitle,
-  eulaDescription,
-  onPrivacyPress,
-  onTermsPress,
-  onEulaPress,
-}) => (
-  <LegalScreen
-    title={title}
-    description={description}
-    documentsHeader={documentsHeader}
-    privacyTitle={privacyTitle}
-    privacyDescription={privacyDescription}
-    termsTitle={termsTitle}
-    termsDescription={termsDescription}
-    eulaTitle={eulaTitle}
-    eulaDescription={eulaDescription}
-    onPrivacyPress={onPrivacyPress}
-    onTermsPress={onTermsPress}
-    onEulaPress={onEulaPress}
-  />
-);

package/src/presentation/navigation/components/wrappers/SettingsScreenWrapper.tsx

@@ -1,44 +0,0 @@
-/**
- * Settings Screen Wrapper Component
- */
-import React from "react";
-import { SettingsScreen } from "../../../screens/SettingsScreen";
-import type { SettingsConfig, CustomSettingsSection } from "../../../screens/types";
-import type { UserProfileDisplay } from "../../types";
-import type { DevSettingsProps } from "../../../../domains/dev";
-
-export interface SettingsScreenWrapperProps {
-  config?: SettingsConfig;
-  appVersion: string;
-  showUserProfile: boolean;
-  userProfile?: UserProfileDisplay;
-  devSettings?: DevSettingsProps;
-  customSections?: CustomSettingsSection[];
-  showHeader?: boolean;
-  showCloseButton?: boolean;
-  onClose?: () => void;
-}
-
-export const SettingsScreenWrapper: React.FC<SettingsScreenWrapperProps> = ({
-  config,
-  appVersion,
-  showUserProfile,
-  userProfile,
-  devSettings,
-  customSections,
-  showHeader,
-  showCloseButton,
-  onClose,
-}) => (
-  <SettingsScreen
-    config={config}
-    appVersion={appVersion}
-    showUserProfile={showUserProfile}
-    userProfile={userProfile}
-    devSettings={devSettings}
-    customSections={customSections}
-    showHeader={showHeader}
-    showCloseButton={showCloseButton}
-    onClose={onClose}
-  />
-);

package/src/presentation/navigation/components/wrappers/index.ts

@@ -1,7 +0,0 @@
-/**
- * Wrapper Components
- */
-export { LegalScreenWrapper } from './LegalScreenWrapper';
-export type { LegalScreenWrapperProps } from './LegalScreenWrapper';
-export { AboutScreenWrapper } from './AboutScreenWrapper';
-export type { AboutScreenWrapperProps } from './AboutScreenWrapper';