@umituz/react-native-settings 4.23.111 → 4.23.115

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.111",
+  "version": "4.23.115",
   "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/feedback/presentation/components/FeedbackForm.tsx

@@ -8,23 +8,9 @@ import { View, TouchableOpacity, ScrollView, TextInput } from "react-native";
 import { useAppDesignTokens, AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
 import { validateFeedbackForm } from "../../../../infrastructure/utils/validation";
-
+import type { FeedbackFormProps } from "./FeedbackFormProps";
 import { getFeedbackFormStyles as getStyles } from "./FeedbackForm.styles";
 
-export interface FeedbackFormProps {
-    onSubmit: (data: { type: FeedbackType; rating: FeedbackRating; description: string; title: string }) => Promise<void>;
-    texts: {
-        ratingLabel: string;
-        descriptionPlaceholder: string;
-        submitButton: string;
-        submittingButton: string;
-        feedbackTypes: Array<{ type: FeedbackType; label: string }>;
-        defaultTitle: (type: FeedbackType) => string;
-    };
-    initialType?: FeedbackType;
-    isSubmitting?: boolean;
-}
-
 export const FeedbackForm: React.FC<FeedbackFormProps> = ({
     onSubmit,
     texts,

package/src/domains/feedback/presentation/components/FeedbackFormProps.ts

@@ -0,0 +1,26 @@
+/**
+ * FeedbackForm Props Types
+ */
+
+import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
+
+export interface FeedbackFormTexts {
+    ratingLabel: string;
+    descriptionPlaceholder: string;
+    submitButton: string;
+    submittingButton: string;
+    feedbackTypes: Array<{ type: FeedbackType; label: string }>;
+    defaultTitle: (type: FeedbackType) => string;
+}
+
+export interface FeedbackFormProps {
+    onSubmit: (data: {
+        type: FeedbackType;
+        rating: FeedbackRating;
+        description: string;
+        title: string;
+    }) => Promise<void>;
+    texts: FeedbackFormTexts;
+    initialType?: FeedbackType;
+    isSubmitting?: boolean;
+}

package/src/domains/feedback/presentation/components/FeedbackModal.tsx

@@ -8,7 +8,7 @@ import { View, StyleSheet, TouchableOpacity } from "react-native";
 import { useAppDesignTokens, AtomicText, AtomicIcon, BaseModal, ScreenLayout } from "@umituz/react-native-design-system";
 import { FeedbackForm } from "./FeedbackForm";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
-import type { FeedbackFormProps } from "./FeedbackForm";
+import type { FeedbackFormProps } from "./FeedbackFormProps";
 
 export interface FeedbackModalProps {
     visible: boolean;

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

@@ -90,7 +90,7 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
 
       {isUnlocked && (
         <View style={[styles.checkmark, { backgroundColor: finalUnlockedColor }]}>
-          <AtomicText style={styles.checkmarkText}>✓</AtomicText>
+          <AtomicText style={[styles.checkmarkText, { color: tokens.colors.onPrimary }]}>✓</AtomicText>
         </View>
       )}
     </View>
@@ -142,7 +142,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   checkmarkText: {
-    color: "#FFFFFF",
     fontSize: 14,
     fontWeight: "bold",
   },

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

@@ -4,28 +4,10 @@
  */
 
 import React from "react";
-import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+import { View } from "react-native";
 import { useAppDesignTokens, AtomicText, AtomicIcon, withAlpha } from "@umituz/react-native-design-system";
-
-export interface AchievementItemProps {
-  title: string;
-  description: string;
-  icon: React.ReactNode | string;
-  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;
-}
+import type { AchievementItemProps } from "./types/AchievementItemProps";
+import { achievementItemStyles as styles } from "./styles/achievementItemStyles";
 
 export const AchievementItem: React.FC<AchievementItemProps> = ({
   title,
@@ -78,7 +60,9 @@ export const AchievementItem: React.FC<AchievementItemProps> = ({
           </AtomicText>
           {isUnlocked && (
             <View style={[styles.checkmark, { backgroundColor: finalAccentColor }]}>
-              <AtomicText style={styles.checkmarkText}>✓</AtomicText>
+              <AtomicText style={[styles.checkmarkText, { color: tokens.colors.background }]}>
+                ✓
+              </AtomicText>
             </View>
           )}
         </View>
@@ -116,73 +100,3 @@ export const AchievementItem: React.FC<AchievementItemProps> = ({
     </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/GamificationScreen/AchievementsList.tsx

@@ -7,7 +7,7 @@ import { View, type TextStyle } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system";
 import { AchievementItem } from "../AchievementItem";
 import { styles } from "./styles";
-import type { AchievementItemProps } from "../AchievementItem";
+import type { AchievementItemProps } from "../types/AchievementItemProps";
 
 export interface AchievementsListProps {
   achievementsTitle: string;

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

@@ -6,7 +6,7 @@
 import type React from 'react';
 import type { LevelProgressProps } from "../LevelProgress";
 import type { StatsCardProps } from "../StatsCard";
-import type { AchievementItemProps } from "../AchievementItem";
+import type { AchievementItemProps } from "../types/AchievementItemProps";
 import type { StreakDisplayProps } from "../StreakDisplay";
 import type { ViewStyle, TextStyle } from "react-native";
 import type { GamificationConfig } from "../../types";

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

@@ -9,6 +9,7 @@ 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 { AchievementItem } from "./AchievementItem";
+export type { AchievementItemProps } from "./types/AchievementItemProps";
 export { GamificationScreen } from "./GamificationScreen/index";
 export type { GamificationScreenProps, GamificationConfigProps } from "./GamificationScreen/types";

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

@@ -0,0 +1,74 @@
+/**
+ * AchievementItem Styles
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const achievementItemStyles = 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: {
+    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/types/AchievementItemProps.ts

@@ -0,0 +1,25 @@
+/**
+ * AchievementItem Props Types
+ */
+
+import type { ViewStyle, TextStyle } from 'react-native';
+
+export interface AchievementItemProps {
+  title: string;
+  description: string;
+  icon: React.ReactNode | string;
+  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;
+}

package/src/infrastructure/utils/styleUtils.ts

@@ -1,190 +1,7 @@
 /**
  * Style Utilities
- * Centralized style creation functions to reduce code duplication
+ * Re-exports from organized style modules
+ * @deprecated Import from specific modules instead: styles/layoutStyles, styles/componentStyles, etc.
  */
-import { StyleSheet, ViewStyle, TextStyle, ImageStyle } from 'react-native';
-import type { DesignTokens } from '@umituz/react-native-design-system';
 
-/**
- * Creates a container style with flex 1
- */
-export const createContainerStyle = (overrides: ViewStyle = {}): ViewStyle => ({
-  flex: 1,
-  ...overrides,
-});
-
-/**
- * Creates a centered container style
- */
-export const createCenteredContainerStyle = (overrides: ViewStyle = {}): ViewStyle => ({
-  flex: 1,
-  justifyContent: 'center',
-  alignItems: 'center',
-  ...overrides,
-});
-
-/**
- * Creates a row style for horizontal layouts
- */
-export const createRowStyle = (overrides: ViewStyle = {}): ViewStyle => ({
-  flexDirection: 'row',
-  alignItems: 'center',
-  ...overrides,
-});
-
-/**
- * Creates a header style
- */
-export const createHeaderStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
-  paddingHorizontal: tokens.spacing.lg,
-  paddingVertical: tokens.spacing.md,
-  ...overrides,
-});
-
-/**
- * Creates a section style
- */
-export const createSectionStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
-  padding: tokens.spacing.lg,
-  ...overrides,
-});
-
-/**
- * Creates a card style
- */
-export const createCardStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
-  backgroundColor: tokens.colors.surface,
-  borderRadius: tokens.borders.radius.md,
-  padding: tokens.spacing.lg,
-  ...overrides,
-});
-
-/**
- * Creates a title text style
- */
-export const createTitleStyle = (tokens: DesignTokens, overrides: TextStyle = {}): TextStyle => ({
-  fontSize: tokens.typography.headlineMedium.responsiveFontSize,
-  fontWeight: '600',
-  color: tokens.colors.textPrimary,
-  ...overrides,
-});
-
-/**
- * Creates a subtitle text style
- */
-export const createSubtitleStyle = (tokens: DesignTokens, overrides: TextStyle = {}): TextStyle => ({
-  fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-  color: tokens.colors.textSecondary,
-  ...overrides,
-});
-
-/**
- * Creates a button style
- */
-export const createButtonStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
-  backgroundColor: tokens.colors.primary,
-  borderRadius: tokens.borders.radius.md,
-  paddingVertical: tokens.spacing.md,
-  paddingHorizontal: tokens.spacing.lg,
-  ...overrides,
-});
-
-/**
- * Creates an icon container style
- */
-export const createIconContainerStyle = (
-  size: number = 48,
-  tokens: DesignTokens,
-  overrides: ViewStyle = {}
-): ViewStyle => ({
-  width: size,
-  height: size,
-  borderRadius: size / 2,
-  justifyContent: 'center',
-  alignItems: 'center',
-  backgroundColor: tokens.colors.surfaceSecondary,
-  ...overrides,
-});
-
-/**
- * Creates a scroll content style
- */
-export const createScrollContentStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
-  padding: tokens.spacing.lg,
-  ...overrides,
-});
-
-/**
- * Creates a separator/border style
- */
-export const createSeparatorStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
-  height: 1,
-  backgroundColor: tokens.colors.border,
-  ...overrides,
-});
-
-/**
- * Creates a margin utility style
- */
-export const createMarginStyle = (
-  spacing: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
-  tokens: DesignTokens,
-  overrides: ViewStyle = {}
-): ViewStyle => ({
-  margin: tokens.spacing[spacing],
-  ...overrides,
-});
-
-/**
- * Creates a padding utility style
- */
-export const createPaddingStyle = (
-  spacing: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
-  tokens: DesignTokens,
-  overrides: ViewStyle = {}
-): ViewStyle => ({
-  padding: tokens.spacing[spacing],
-  ...overrides,
-});
-
-/**
- * Combines multiple styles into one
- */
-export const combineStyles = (
-  ...styles: (ViewStyle | TextStyle | ImageStyle | undefined | false)[]
-): ViewStyle | TextStyle | ImageStyle => {
-  return StyleSheet.flatten(styles.filter(Boolean));
-};
-
-/**
- * Creates a responsive style based on screen dimensions
- */
-export const createResponsiveStyle = (
-  _tokens: DesignTokens,
-  phoneStyle: ViewStyle,
-  _tabletStyle?: ViewStyle
-): ViewStyle => {
-  // For now, return phone style. Can be enhanced with actual responsive logic
-  return phoneStyle;
-};
-
-/**
- * Type guard for ViewStyle
- */
-export const isViewStyle = (style: any): style is ViewStyle => {
-  return style && typeof style === 'object';
-};
-
-/**
- * Creates a safe area aware style
- */
-export const createSafeAreaStyle = (
-  insets: { top?: number; bottom?: number; left?: number; right?: number },
-  overrides: ViewStyle = {}
-): ViewStyle => ({
-  paddingTop: insets.top,
-  paddingBottom: insets.bottom,
-  paddingLeft: insets.left,
-  paddingRight: insets.right,
-  ...overrides,
-});
+export * from './styles';

package/src/infrastructure/utils/styles/componentStyles.ts

@@ -0,0 +1,90 @@
+/**
+ * Component Style Utilities
+ * Reusable component styling patterns
+ */
+
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { DesignTokens } from '@umituz/react-native-design-system';
+
+/**
+ * Creates a header style
+ */
+export const createHeaderStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  paddingHorizontal: tokens.spacing.lg,
+  paddingVertical: tokens.spacing.md,
+  ...overrides,
+});
+
+/**
+ * Creates a section style
+ */
+export const createSectionStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  padding: tokens.spacing.lg,
+  ...overrides,
+});
+
+/**
+ * Creates a card style
+ */
+export const createCardStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  backgroundColor: tokens.colors.surface,
+  borderRadius: tokens.borders.radius.md,
+  padding: tokens.spacing.lg,
+  ...overrides,
+});
+
+/**
+ * Creates a button style
+ */
+export const createButtonStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  backgroundColor: tokens.colors.primary,
+  borderRadius: tokens.borders.radius.md,
+  paddingVertical: tokens.spacing.md,
+  paddingHorizontal: tokens.spacing.lg,
+  ...overrides,
+});
+
+/**
+ * Creates an icon container style
+ */
+export const createIconContainerStyle = (
+  size: number = 48,
+  tokens: DesignTokens,
+  overrides: ViewStyle = {}
+): ViewStyle => ({
+  width: size,
+  height: size,
+  borderRadius: size / 2,
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: tokens.colors.surfaceSecondary,
+  ...overrides,
+});
+
+/**
+ * Creates a separator/border style
+ */
+export const createSeparatorStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  height: 1,
+  backgroundColor: tokens.colors.border,
+  ...overrides,
+});
+
+/**
+ * Creates a title text style
+ */
+export const createTitleStyle = (tokens: DesignTokens, overrides: TextStyle = {}): TextStyle => ({
+  fontSize: tokens.typography.headlineMedium.responsiveFontSize,
+  fontWeight: '600',
+  color: tokens.colors.textPrimary,
+  ...overrides,
+});
+
+/**
+ * Creates a subtitle text style
+ */
+export const createSubtitleStyle = (tokens: DesignTokens, overrides: TextStyle = {}): TextStyle => ({
+  fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+  color: tokens.colors.textSecondary,
+  ...overrides,
+});

package/src/infrastructure/utils/styles/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Style Utilities - Index
+ * Centralized exports for all style utilities
+ */
+
+export * from './layoutStyles';
+export * from './componentStyles';
+export * from './spacingStyles';
+export * from './styleHelpers';

package/src/infrastructure/utils/styles/layoutStyles.ts

@@ -0,0 +1,56 @@
+/**
+ * Layout Style Utilities
+ * Common layout patterns
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '@umituz/react-native-design-system';
+
+/**
+ * Creates a container style with flex 1
+ */
+export const createContainerStyle = (overrides: ViewStyle = {}): ViewStyle => ({
+  flex: 1,
+  ...overrides,
+});
+
+/**
+ * Creates a centered container style
+ */
+export const createCenteredContainerStyle = (overrides: ViewStyle = {}): ViewStyle => ({
+  flex: 1,
+  justifyContent: 'center',
+  alignItems: 'center',
+  ...overrides,
+});
+
+/**
+ * Creates a row style for horizontal layouts
+ */
+export const createRowStyle = (overrides: ViewStyle = {}): ViewStyle => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  ...overrides,
+});
+
+/**
+ * Creates a scroll content style
+ */
+export const createScrollContentStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  padding: tokens.spacing.lg,
+  ...overrides,
+});
+
+/**
+ * Creates a safe area aware style
+ */
+export const createSafeAreaStyle = (
+  insets: { top?: number; bottom?: number; left?: number; right?: number },
+  overrides: ViewStyle = {}
+): ViewStyle => ({
+  paddingTop: insets.top,
+  paddingBottom: insets.bottom,
+  paddingLeft: insets.left,
+  paddingRight: insets.right,
+  ...overrides,
+});